Multi Background
CSS Multi background property is used to add one or more images at a
time without HTML code, We can add images as per our requirement.A
sample syntax of multi background images is as follows −
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
the most commonly used values are shown below −
| Values |
Description |
| background |
Used to setting all the background image properties in one section |
| background-clip |
Used to declare the painting area of the background |
| background-image |
Used to specify the background image |
| background-origin |
Used to specify position of the background images |
| background-size |
Used to specify size of the background images |
Example
Following is the example which demonstrate the multi background images
<html>
<head>
<style>
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id="multibackground">
<h1>www.tutorialspoint.com</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at
their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated,
we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on
topics ranging from programming languages to web designing to academics and much more..</p>
</div>
</body>
</html>
It will produce the following result −
Size of Multi background
Multi background property is accepted to add different sizes for different images.A sample syntax is as shown below −
#multibackground {
background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
background-size: 50px, 130px, auto;
}
As shown above an example, each image is having specific sizes as 50px, 130px and auto size.
No comments:
Post a Comment