Background images / textures are being used and implemented in many ways, often adding the nicest of finishing touches to a website. It is now proposed that in CSS 3, we can apply background image dimensions as well as use multiple background images. Along with the +/- quick list of compatible browsers, here is how…
The CSS3 background-size is written background-size: Apx Bpx;
- Apx = x-axis (width)
- Bpx = y-axis (height)
So now knowing this, we can start experimenting in the following ways…
Cross Brower Compatability
The browser that best supports the CSS3 background-size effect is Safari and Opera, which means we will concentraite on using the -o- and -webkit- prefix.
All articles in the CSS3 will be updated in light of future support & development.
Background-Size
This panel uses a standard 270 by 500 pixel image, downsized to 150 by 250 pixels:
- CSS3 Background Image (Size)
- #my_CSS3_id {
- 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;
- }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8…)
- Opera (9.6)
- Safari (3.2.1, Windows)
An example for those on alternative browsers, not seeing the background-image effect..
To apply multiple background images in CSS3, we use a comma, e.g.
background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;
So we can now experiment arranging a few different images in one line of code…
Multiple Background Images
This panel uses three seperate images in its background:
- CSS3 Background Image (Multiple)
- #my_CSS3_id {
- 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;
- }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8…)
- Opera (9.6)
- Safari (3.2.1, Windows)
An example for those on alternative browsers, not seeing the background-image effect..
Zen Elements Blog | CSS3 Series
- CSS3: Introduction
- CSS3: Border Radius
- CSS3: Border Color
- CSS3: Shadows
- CSS3: Background Images
- CSS3: Multiple Column
- CSS3: Embedding A Font Face
- CSS3: Opacity
- CSS3: RGBA
- CSS3: HSL & HSLA
So with these new CSS 3 background capabilities, I will be looking forward to see how they are used to create some nice background effects. Feel free to post any that you’ve seen in a comment below!
Also would like to give thanks to SummerAIR | Jen for her brushes which were borrowed for the background images in this CSS3 guide.
Subscribe to RSS or Email so you don’t miss the next article!
Thanks for reading,
Alex | Zen Elements
Hopefully this becomes available in FF3 soon… (and also the other browsers) as this would make a lot of things easier for me to do instead of having to have two divs behind a div to make the effect of two backgrounds.
I agree that it would be a fantastically useful addition to the CSS arsenal.
I shall continue to badger the browsers into supporting it – among the other CSS 3 bits ‘n’ pieces – if you will!
i can’t wait to see this work on every browser :D
nice article
I can’t wait for this to be implemented on all browsers…
I was playing with this but I can’t get it to work.
I have 3 images as background in the body tag – image1 top left repeat-y, image2 top center no-repeat, image3 top right repeat-y.
Is there a way in CSS3 to make the width of image1 and image 3 auto and height 100% but leave image2 static width size of the jpg? If so, then this will save all the trouble!!
Thanks!!