Something about background property in CSS

Background property is one of the most using property in CSS.It gives a new look in a the element while I think that some of the important notes you should make while using background property.According to my analysis there are some of the major values of background property you should know about it.So lets see what are the surprising waiting for you.

Multiple background images

Do you know that you could add double background using CSS,no need of merging two images with any software or programme  just use the following snippet to make it.

Example 1

.bemulitiple {
width: 300px;
height: 300px;
background-image: url(Circle.png), url(Square.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

Result 

Now let me tell you how does it works.

background-image: url(Circle.png), url(Square.png);
background-position: center bottom, left top;
background-repeat: no-repeat;

Now in above part background-image is having 2 urls {URL(1),URL(2)} now in next part background position is their so make sure that the position should follow the url pattern like this {URL(1)postion,URL(2)position}.In same way the background repeat will work.If you want to add a single property in both then simply add a single value other wise follow the same pattern {URL(1)repeat,URL(2)repeat}.

Example 2

#exampleB {
display: inline-block;
margin: 1em; padding: 1em;
background-image: url(left.png), url(right.png), url(middle.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top ;
}

Or

#exampleB {
width: 500px;
height: 250px;
background: url(left.png) left top no-repeat, url(right.png) right top no-repeat, url(middle.png) left top repeat-x;
}

Result 

Now again with same technique just this time I've used 3 different images.In second method position and repeat attribute is inserted with URL.

Background color opacity

This is one of the property you should know.Usually we use color as hex code but if you want to vary the opacity of that color then simply use rgba method.

.becolor{background:rgba(0,179,255,0.5);}

In above example background:rgba(RED,GREEN,BLUE,OPACITY); this format has been used.

Result

Bloggerever