CSS enables you to use multiple background images in single Web Page. Let's Create a Web Page named MultipleBackgrounds.html to understand how to set multiple background images in a web page.
MultipleBackgrounds.html
<!doctype html>
<head>
<title>Multiple background image
</title>
</head>
<body style="background-image:url('alfa.jpg'), url('gate-bridge.jpg'), url('Sunset.jpg');background-position:100px 100px,0 0,300px 300px;background-repeat:no-repeat, repeat-x, no-repeat;width:700px;height:300px;padding:10px 10px 10px 10px;background-color:orange;">
<p style="color:red">Multiple backgrounds involved using multiple property assignments with multiple values, separated by a comma:</p>
</body>
</html>
MultipleBackgrounds.html
<!doctype html>
<head>
<title>Multiple background image
</title>
</head>
<body style="background-image:url('alfa.jpg'), url('gate-bridge.jpg'), url('Sunset.jpg');background-position:100px 100px,0 0,300px 300px;background-repeat:no-repeat, repeat-x, no-repeat;width:700px;height:300px;padding:10px 10px 10px 10px;background-color:orange;">
<p style="color:red">Multiple backgrounds involved using multiple property assignments with multiple values, separated by a comma:</p>
</body>
</html>
The background-image property is used to specif URLs of three images. the position of these images is specified by using the background-position property. In addition, whether these images have to be repeated or not is specified by using the background-repeat property.
The Browser view:
No comments:
Post a Comment