CSS3 Tutorial (5): Web Background Image _css3_css_ Web page making

Web page Production WEBJX article introduction: Background image/Texture There are many ways to use, often used to add the best final landscaping site. Now that it is valued in CSS3, we can use multi-background and background image sizes to achieve a more perfect effect. Background images/textures are used in many ways and are often used to add web

Background images/textures are used in many ways and are often used to add the best final beautification of the site. Now that it is valued in CSS3, we can use multi-background and background image sizes to achieve a more perfect effect.
Background images/textures are used in many ways and are often used to add the best final beautification of the site. Now that it is valued in CSS3, we can use multi-background and background image sizes to achieve a more perfect effect.
Previous post: CSS3 tutorial (4): page borders and Web text shading
CSS3 background image size can be written as background-size:apx Bpx;
-APX = x-axis (picture width)
-bpx = y-axis (picture height)
With this in view, let's begin to experience this feature:
The best browsers that 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 multi-background images in CSS3, we use them well separated, 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 ...)

The above is CSS3 tutorial (5): Page background image _css3_css_ page production content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

