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.

Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.