概要
css3の背景のサイズを指定するbackground-sizeについて説明します
プロパティ名
background-size
内容
背景のサイズを指定します
設定値
設定値名 | 設定値内容 |
---|---|
auto | 自動算出(初期値) |
contain | 縦横比は保持。最大サイズで背景に表示 |
cover | 縦横比は保持。最小サイズで背景を覆う |
長さ | 幅・高さを指定 |
% | 画像の幅・高さのパーセンテージを指定 |
サンプル
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>background_size</title> <style type="text/css"> p { border-style:dashed; border-width:10px; border-color:#000; width:300px; height:100px; padding:10px; } p#contents1 { background-image:url("background-size.png"); background-size:auto; } p#contents2 { background-image:url("background-size.png"); background-size:contain; } p#contents3 { background-image:url("background-size.png"); background-size:cover; } p#contents4 { background-image:url("background-size.png"); background-size:10px 10px; } p#contents5 { background-image:url("background-size.png"); background-size:12.5% auto; } </style> </head> <body> <p id="contents1">auto</p> <p id="contents2">contain</p> <p id="contents3">cover</p> <p id="contents4">auto length 1px,1px</p> <p id="contents5">auto 12.5%</p> <hr /> 以下、背景画像 <img src="background-size.png" alt="" width="" height="" /> </body> </html>