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ランキング
-
<hr>の縦バージョンはありますか?
-
【Webサイト】画像が小さく表示...
-
CSS マウスオーバーでテキスト...
-
ワードプレスで事前定義されたc...
-
htmlかcssで背景の白い枠をなく...
-
HP作成 作成した画像を動画の上...
-
要素の幅をいろんな写真の幅に...
-
背景画像を前面に表示させる方法
-
submitボタンの上に重ねた画像...
-
CSSで横線の引き方を教えてくだ...
-
背景画像をブラウザ上部に隙間...
-
CSSで背景画像をランダムに表示...
-
クリッカブルマップのタップし...
-
background-sizeの背景で最小値...
-
画像の並べかたを知りたい
-
コーディング中、右側に謎の余...
-
【至急お助け!】チェックボッ...
-
WEB上でディレクトリ内の画像を...
-
同じ画像 複数回使用
-
画像で背景透明のテキストがに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
画像とその下にあるテキストの...
-
【Webサイト】画像が小さく表示...
-
htmlかcssで背景の白い枠をなく...
-
同じ画像 複数回使用
-
background-sizeの背景で最小値...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeでcontainする...
-
lightbox2で画像を天地左右中央...
-
コーディング中、右側に謎の余...
-
画像上に文字を表示するとiPhon...
-
背景画像をリピートさせない方...
-
LightBoxの矢印の出し方
-
CSSで背景画像をランダムに表示...
-
フッターの背景に色を指定した...
-
透過gif画像の上に文章を重ねる...
おすすめ情報