CSS3 Background Images
Background images / textures are being used and implemented in many ways, often adding the nicest of finishing touches to a website. It is now in CSS3 we can apply background image dimensions as well as use multiple background images.
The CSS3 background-size is written background-size: Apx Bpx;
- Apx = x-axis (width)
- Bpx = y-axis (height)
Background-Size
- CSS3 Background Image (Size)
- #my_CSS3_id {
- background:url(image_1.extention) bottom right no-repeat;
- -moz-background-size: 100px 200px;
- -o-background-size: 100px 200px;
- -webkit-background-size: 100px 200px;
- }
An example for those on alternative browsers, not seeing the background-image effect..
Multiple Background Images
Applying multiple background images in CSS3 is quite easy, using a comma with the standard background property.
E.g. background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;
- CSS3 Background Image (Multiple)
- #my_CSS3_id {
- 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; - }
An example for those on alternative browsers, not seeing the background-image effect..
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
Thank you for reading!
Alex | @ZenElements
�)
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!!
Finally, a solution to the need for double divs to make rounded corners!
…oh, wait… >.>