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 −
| Sr.No. | Value & Description |
|---|---|
| 1 |
background
Used to setting all the background image properties in one section
|
| 2 |
background-clip
Used to declare the painting area of the background
|
| 3 |
background-image
Used to specify the background image
|
| 4 |
background-origin
Used to specify position of the background images
|
| 5 |
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.learnsoftware.com</h1> <p> Learn Software 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>
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