Define Sizes of Multiple Background Images

The background-size property also accepts multiple values for background size (using a comma-separated list), when working with multiple backgrounds. The following example has three background images specified, with different background-size value for each image:

HTML file:	Displayed by browser:
<style> #example1 { background: url(../html_beg/images/img_flwr.png) left top no-repeat, url(../html_beg/images/img_flwr.png) right bottom no-repeat, url(../html_beg/images/paper.gif) left top repeat; background-size: 75px, 130px, auto; } </style> <body> <div id="example1"> <h1 style="text-align:center;">Sizing Multiple Background Images</h1> <p>The first image is 75 pixels and attached at the top left corner.</p> <p>The second image (same as the first one) is sized to 130 pixels and is attached to the bottom right corner.</p> <p>The third image is the paper-like background which is sized to auto.</p> </div> </body>	Sizing Multiple Background Images The first image is 75 pixels and attached at the top left corner. The second image (same as the first one) is sized to 130 pixels and is attached to the bottom right corner. The third image is the paper-like background which is sized to auto.

HTML file:

Displayed by browser:

<body>
<div id="example1">
<h1 style="text-align:center;">Sizing Multiple Background Images</h1>
<p>The first image is 75 pixels and attached at the top left corner.</p>
<p>The second image (same as the first one) is sized to 130 pixels and is attached to the bottom right corner.</p>
<p>The third image is the paper-like background which is sized to auto.</p>
</div>
</body>

Sizing Multiple Background Images

The first image is 75 pixels and attached at the top left corner.

The second image (same as the first one) is sized to 130 pixels and is attached to the bottom right corner.

The third image is the paper-like background which is sized to auto.