css3 background

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>

戻るホーム次へ

css3 背景

background-size プロパティ

background-origin プロパティ

複数の背景画像