CSS3 tutorial (5): Web page background image_css3_CSS_Web page production

Webpage production Webjx article introduction: Background images/textures can be used in many ways, and are often used to add the best final beautification of the website. Now that it is taken seriously in CSS3, we can apply multiple background images and background image sizes to achieve more perfect effects. Background images/textures can be used in many ways, and are often used to add the best final beautification to a website.

Background images/textures can be used in many ways, and are often used to add the best final beautification to a website. Now that it is taken seriously in CSS3, we can apply multiple background images and background image sizes to achieve more perfect effects.
Background images/textures can be used in many ways and are often used to add the best final beautification to a website. Now that it is taken seriously in CSS3, we can apply multiple background images and background image sizes to achieve more perfect effects.
Previous article: CSS3 tutorial (4): Web page border and web page text shadow
The background image size of CSS3 can be written as background-size:Apx Bpx;
-Apx = x-axis (image width)
-Bpx = y-axis ( Image height)
Understanding this, let’s start to experience this feature:
The best browsers to support CSS3 background size are Safari and Opera, so we only 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; }
Browser support:

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…)
In order to apply multiple background images in 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;

#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; }
Browser support:

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…)

That’s it CSS3 tutorial (5): Web page background image_css3_CSS_Web page production content. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!