「CSSでウィンドウサイズに合わせた背景画像」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

CSSでウィンドウサイズに合わせた背景画像

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSでウィンドウサイズに合わせた背景画像</title>
<style type="text/css">
#wrapBgImg {}
.wrapOne {
border:1px solid #ccc;
background-color:#e0e0e0;
display:inline-block;
width:160px;
margin-top:5px;
padding:5px 0;
text-align:center;
}
.BgImg {
border:1px solid #ccc;
margin:0 auto;
width:150px;
height:200px;
background:#eeffff url("images/catnapsample.gif") center center no-repeat;
}
</style>
</head>
<body>
<h1>CSSでウィンドウサイズに合わせた背景画像</h1>
<p>「background-size」の値次第で以下のような感じになる。</p>
<p>
「contain」は、枠内に収まる最大サイズ。<br />
「cover」は、枠内が覆われる最大サイズ。<br />
</p>
<div id="wrapBgImg">
<div class="wrapOne"><div class="BgImg" style="background-size:auto;"> </div>auto</div>
<div class="wrapOne"><div class="BgImg" style="background-size:contain;"> </div>contain</div>
<div class="wrapOne"><div class="BgImg" style="background-size:cover;"> </div>cover</div>
<div class="wrapOne"><div class="BgImg" style="background-size:90px 90px;"> </div>(長さ)90px 90px</div>
<div class="wrapOne"><div class="BgImg" style="background-size:auto 90px;"> </div>(長さ)auto 90px</div>
<div class="wrapOne"><div class="BgImg" style="background-size:90% 90%;"> </div>(%)90% 90%</div>
<div class="wrapOne"><div class="BgImg" style="background-size:90% auto;"> </div>(%)90% auto</div>
<div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>