CSS3 Tutorial: Background picture (background size and background image)

Background images/textures are used in a variety of ways and are often used to add the best final landscaping to the site. Now it is valued in the CSS3, we can apply the background image and background picture size to achieve more perfect effect.

CSS3 background picture size can be written as background-size:apx bpx;
-APX = x axis (picture width)
-bpx = y-axis (picture height)

Having learned this, we begin to experience this feature:
The best browsers to support CSS3 background size are safari and opera, so we just need to use the-O and-webkit prefixes.

Background size

#backgroundSize {border:5px solid #bd9ec4; Background:url (image_1.extention) bottom right no-repeat;- o-background-size:150px 250px; -webkit-background-size:150px 250px; padding:15px 25px; Height:inherit; width:590px; }

To apply multiple background images to CSS3, we use them to separate them, for example:

Background:url (image_1.extention) Top right no-repeat, url (image_2.extention) bottom right no-repeat;

We can try to place a number of different pictures in one line of code ...

Multi-background image

#backgroundMultiple {border:5px solid #9e9aab background:url (image_1.extention) top left no-repeat, url (image_2. extention) bottom left no-repeat, url (image_3.extention) bottom right no-repeat; padding:15px 25px; Height:inherit; width:590px; }