background-size プロパティ
background-size プロパティは、背景画像のサイズを指定することを可能にします。
<!DOCTYPE html> <html> <head> <style> #back-img{ { background:url(img/img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; padding-top:40px; } </style> </head> <body> <div id="back-img"/><br> <p>元の画像: <img src="img_flwr.gif" alt="Flowers" width="224" height="162"></p> </body> </html>
元の画像:
background-origin プロパティ
background-origin プロパティは、背景画像の配置位置を指定するものです。
配置位置は、content-box、padding-box、border-box エリアの何れかです(下図参照)。
background-origin:border-box:
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。
池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好
い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。
background-origin:padding-box:
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。
池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好
い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。
background-origin:content-box:
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。
池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好
い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。
<!DOCTYPE html> <html> <head> <style> .back-org{ border:1px solid black; padding:35px; background-image:url('img/smiley.gif'); background-repeat:no-repeat; background-position:left; } #div1{ background-origin:border-box; } #div2{ background-origin:padding-box; } #div3{ background-origin:content-box; } </style> </head> <body> <p>background-origin:border-box:</p> <div id="div1" class="back-org"/> ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。 池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好 い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。 </div> <p>background-origin:padding-box:</p> <div id="div2" class="back-org"/> ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。 池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好 い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。 </div> <p>background-origin:content-box:</p> <div id="div3" class="back-org"/> ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。 池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好 い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。 </div> </body> </html>
複数の背景画像
CSS3 では、要素の背景に複数の画像を使用することができます。
<!DOCTYPE html> <html> <head> <style> #back-multi{ background:url(img/img_tree.gif),url(img/img_flwr.gif); background-size:30% 30%; background-repeat:no-repeat; } </style> </head> <body> <div id="back-multi"/><br><br><br><br><br><br><br><br> </body> </html>