background-sizeの背景で最小値指定はできますか？

締切済

質問者：apple_mango
質問日時：2015/12/06 15:51
回答数：2件

background-size:contain;とかで表示される背景画像に最小値や最大値の指定は行えますか？

画面幅をあまり小さくした場合には、例えば横幅が400px以下の背景画像にならないように出来るのでしょうか？大きい場合にはその逆で、1200pxを超えたらそれ以上は大きくならないといった具合に…。

出来れば、画面幅を指定して別のCSSに切りかえるなどではなく、普通のCSS定義で出来れば嬉しいのですが、これは不可能でしょうか？
ちなみに、min-widthなどの定義では背景画像は変化が見られませんでした…。

お詳しい方、アドバイスいただけないでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2015/12/07 18:56

ちなみにサンプル

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　の<DATA>にて検証済みのHTML5
★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　にて検証済みのCSS3
★タブは＿に置換してあるので戻すこと
※ background-sizeは、ルート要素---htmlとbody要素には・・・

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
For documents whose root element is an HTML HTML element [HTML401] or an XHTML html element [XHTML11]: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTML BODY or XHTML body child element. The used values of that BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［CSS Backgrounds and Borders Module Level 3( http://www.w3.org/TR/2014/CR-css3-background-201 … )］より

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA1951">
<style media="screen">

</style>
</head>
<body>
＿<article>
＿＿<header>
＿＿＿<h1 id="title">Your title</h1>
＿＿＿<nav>
＿＿＿＿<ul>
＿＿＿＿＿<li><a href="/">Top</a></li>
＿＿＿＿＿<li><a href="/books">Book</a></li>
＿＿＿＿＿<li><a href="/links.html">links</a></li>
＿＿＿＿</ul>
＿＿＿</nav>
＿＿</header>
＿＿<section>
＿＿＿<h2>A smaller heading</h2>
＿＿＿<p>
＿＿＿</p>
＿＿＿<aside>
＿＿＿＿<h3>Something aside</h3>
＿＿＿</aside>
＿＿</section>
＿＿<footer>
＿＿＿<h3>A nice footer</h3>
＿＿＿<dl class="document-version">
＿＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿＿<dd>2005-06-10</dd>
＿＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd>
＿＿＿</dl>
＿＿</footer>
＿</article>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2015/12/07 08:27

こんなところで聞いたって正解は返ってこない。

必ず仕様書を確認してその解釈がわからないときなどに相談する。これはHTML/CSSとかに限らず、すべての勉強に言えること
3.9. Sizing Images: the ‘background-size’ property( http://www.w3.org/TR/2014/CR-css3-background-201 … )
　Value: <bg-size> [ , <bg-size> ]*
・・・・・
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
・・・・・
　max-widthとかmin-widthはありません。

　理由はそれが『背景』だからです。
　よって、あるブロックないし画像を作ってそのブロックのサイズを指定して、それに背景--ないし画像のサイズを指定すればよい。背景と考えるからむつかしくなる。