CSS3 Web Crafting tips: CSS3 multiple backgrounds

Source: Internet
Author: User
Tags versions
Article Introduction: CSS3 The following versions of background can only have a single picture background settings, tiling, background position. And in CSS3 gives it more power, can set more background picture, this is to say today CSS3 multiple backgrounds.

For background do not need to do more explanation, if not understand can be a separate forum post.

CSS3 The following versions of background can only have a single picture background settings, tiling, background position. And in CSS3 gives it more power, can set more background picture, this is to say today CSS3 multiple backgrounds.

Multiple background grammar: background: Background, background, background;

1.background:url (images/weather-cloud.png) center center no-repeat, url (images/weather-clouds.png) top left No-repeat , the URL (images/weather-cloudy.png) top right no-repeat, the URL (images/weather-rain.png) bottom left No-repeat,url (images/ weather-snow.png) bottom right no-repeat;

This is also promoted by the background in CSS2, but it supports multiple backgrounds. Likewise it separates to write:

1.background-image:url (images/weather-cloud.png), url (images/weather-clouds.png), url (images/weather-cloudy.png)  , URL (images/weather-rain.png), url (images/weather-snow.png);  

2.background-repeat:no-repeat; 

3.background-position:center center,top left,top Right,bottom left,bottom right;

Remember: Image calls several, and if you do not share other properties, you must write the attributes separately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.