CSS3 background Property

Here is the brief explanation on how to add multiple background images for an element using the CSS3 background-image property.

Explanation

CSS3 contains a few new background properties, which allow greater control of the background element.
It includes
  • background-size
  • background-origin
  • background-clip

CSS3 allows you to add multiple background images for an element, through the background-image property.Multiple images are attached by using the separator comma. Multiple background images can be specified using either the individual background properties or the background shorthand property.


Property :

background-image: url(url1), url(url2);


Multiple background images can be specified using either the individual background properties like as follows:
background-image: url(img_rose.gif), url(kite.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

Example:
<div style=' background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;width:200px;height:100px;
background-image: url(rose.png), url(test3.jpg);'>This is an example for CSS3 Multiple image attachment.
</div>

Result:
This is an example for CSS3 Multiple image attachment.



Ask Questions

Ask Question