![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
background-size:contain;とかで表示される背景画像に最小値や最大値の指定は行えますか?
画面幅をあまり小さくした場合には、例えば横幅が400px以下の背景画像にならないように出来るのでしょうか?大きい場合にはその逆で、1200pxを超えたらそれ以上は大きくならないといった具合に…。
出来れば、画面幅を指定して別のCSSに切りかえるなどではなく、普通のCSS定義で出来れば嬉しいのですが、これは不可能でしょうか?
ちなみに、min-widthなどの定義では背景画像は変化が見られませんでした…。
お詳しい方、アドバイスいただけないでしょうか。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
ちなみにサンプル
★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">
<!--
html,body{margin:0;padding:0;}
body>article{
_width:80%;
_min-width:400px;
_max-width:800px;
_margin:0 auto;
_background-image:url("./images/background/conteainer.png");
_background-repeat:repeat-y;
_background-size:contain;
}
h1,h2,h3,h4,h5,h6,p{margin:0 2em;line-height:1.6em;}
body>article>section{min-height:800px;}
-->
</style>
</head>
<body>
_<article><!-- articleとはheader,section,footerを持つであろう一連の記事を示す要素 --->
__<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>
No.1
- 回答日時:
こんなところで聞いたって正解は返ってこない。
必ず仕様書を確認してその解釈がわからないときなどに相談する。これは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はありません。
理由はそれが『背景』だからです。
よって、あるブロックないし画像を作ってそのブロックのサイズを指定して、それに背景--ないし画像のサイズを指定すればよい。背景と考えるからむつかしくなる。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- フリーソフト GIMPの使い方 1 2022/07/11 13:52
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
background-repeat CSS で切れ...
-
画像とその下にあるテキストの...
-
htmlかcssで背景の白い枠をなく...
-
lightbox2で画像を天地左右中央...
-
LightBoxの矢印の出し方
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像の上にテキスト配置で、拡...
-
画像の大きさに合わせて文字の...
-
画像で背景透明のテキストがに...
-
要素の幅をいろんな写真の幅に...
-
【Webサイト】画像が小さく表示...
-
スタイルシート(CSS)で左にア...
-
CSSでサイトの背景に画像を組み...
-
html言語で背景画像を中央...
-
楽天ショップのデザイン
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
マウスが乗ったとき斜め下に下がる
-
マウスオーバーするボタンの画...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
lightbox2で画像を天地左右中央...
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeの背景で最小値...
-
同じ画像 複数回使用
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeでcontainする...
-
CSSで背景画像をランダムに表示...
-
ページごとに背景画像を変更し...
-
画像上に文字を表示するとiPhon...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
submitボタンの上に重ねた画像...
-
CSS マウスオーバーでテキスト...
おすすめ情報