Marusya's School Notes

CSS3 Background Size

The CSS3 background-size property allows you to specify the size of background images. Before CSS3, the size of a background image was the actual size of the image. CSS3 allows us to re-use background images in different contexts. The size can be specified in lengths or percentages:

HTML file:	Displayed by browser:
<style> #example1 { border: 1px solid black; background:url(../html_beg/images/img_flwr.png); background-repeat: no-repeat; padding:15px; } #example2 { border: 1px solid black; background:url(../html_beg/images/img_flwr.png); background-size: 100px 80px; background-repeat: no-repeat; padding:15px; } #example3 { background:url(../html_beg/images/img_flwr.png); background-size: 25%; background-repeat: no-repeat; padding:15px; margin:15px; } </style> <body> <div id="example1"> <h2>Example 1: Original Background-Image Size</h2> <p>This is the original background-image's size. When there is not enough text to make the element large enough, you do not see the full background-image.</p> </div> <br /> <div id="example2"> <h2>Example 2: Resized Background-Image Size</h2> <p>The background-image has been resized to 100 pixels wide by 80 pixels high and is considerably smaller than the original size.</p> </div> <br /> <div id="example3"> <h2>Example 3: No Border Specified</h2> <p>The background-image has been resized to 75% of the original size. There is no border because there was no border specified.</p> </div> </body>	Example 1: Original Background-Image Size This is the original background-image's size. When there is not enough text to make the element large enough, you do not see the full background-image. Example 2: Resized Background-Image Size The background-image has been resized to 100 pixels wide by 80 pixels high and is considerably smaller than the original size. Example 3: No Border Specified The background-image has been resized to 25% of the original size (to the parent). There is no border because there was no border specified.

HTML file:

Displayed by browser:

<body>
<div id="example1">
<h2>Example 1: Original Background-Image Size</h2>
<p>This is the original background-image's size. When there is not enough text to make the element large enough, you do not see the full background-image.</p>
</div>
<br />
<div id="example2">
<h2>Example 2: Resized Background-Image Size</h2>
<p>The background-image has been resized to 100 pixels wide by 80 pixels high and is considerably smaller than the original size.</p>
</div>
<br />
<div id="example3">
<h2>Example 3: No Border Specified</h2>
<p>The background-image has been resized to 75% of the original size. There is no border because there was no border specified.</p>
</div>
</body>

Example 1: Original Background-Image Size

This is the original background-image's size. When there is not enough text to make the element large enough, you do not see the full background-image.

Example 2: Resized Background-Image Size

The background-image has been resized to 100 pixels wide by 80 pixels high and is considerably smaller than the original size.

Example 3: No Border Specified

The background-image has been resized to 25% of the original size (to the parent). There is no border because there was no border specified.