Introduction to CSS3 – Part 6: Backgrounds

by on 27th May 2008 with 21 Comments

For the last part of our introductory series to CSS3, we will be taking a look at the new background properties. These include background size, using more than one background for an element, and background origin (which effects the position of a background).

The new features allow greater control of the background element and will provide designers with a whole array of new possibilities. As usual, examples can be found below:

View the live examples page

Background Size

Before CSS3, background size was determined by the actual size of the image used. It will be possible with the next CSS revision to specify in terms of percentage or pixels how large a background image should be. This will allow you to re-use images in several different contexts and also expand a background to fill an area more accurately.

The following is a simple example of resizing the Design Shack logo as a background in the top left hand area of a div:

.backgroundsize {
background: url(http://www.designshack.net/images/logo.gif);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;
}

CSS3 Background Resizing

Multiple Backgrounds

The new ability to use multiple backgrounds is a great time saver, allowing you to achieve effects which previously required more than one div. Whether it will be possible to combine this with background-size will be interesting to see.

The example below uses one background for the top border, one repeated vertically for the left and right borders and a third at the bottom.

.multiplebackgrounds { 
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}

CSS3 Multiple Backgrounds

Background Origin

CSS3 allows you to specify how the position of a background is calculated. The background-origin property can be set to start positioning from either the border, padding, or content. This allows for greater flexibility in terms of placing a background image.

In conclusion…

There are a whole new variety of background options available with CSS3. As with all the other modules covered in this introductory series, it leads to greater flexibility and makes it much easier to recreate previously complex effects. Whilst not supported by most browsers as yet, it shouldn’t be too long before you can get creating stunning user interfaces with these new additions.

We really hope that you have enjoyed this series, and we’ll be keeping you up to date on all the latest CSS3 developments as they happen over coming months. Here’s looking forward to the next generation of style sheets!

Other posts in the series

Comments & Discussion

21 Comments

  • http://www.broken-links.com Peter Gasston

    An interesting series; thanks. Just one point to note; in your Background Size example it’s good practice to include the property name (without browser prefix) after you’ve listed the browser-specific ones; it future-proofs the style in the case that browsers decide the property is stable and remove the prefix in a future version.

  • http://www.designshack.co.uk David Appleyard

    Hi Peter. Thanks for pointing that out, I have updated the tutorial to reflect it.

  • http://www.taiphanmem.org TaiPhanMem.org

    Thanks for the good article about CSS3. I’m wondering about the IE, because only it does not support these exciting features.

  • Pingback: Discover The Best Of The Web In May 2008 « the gypsy

  • Alif amri

    Hi, thanks for your tutorial, but how about css3 browser compatiblity. Still waiting about that. Thanks

  • dave

    Wow! thanks a lot!

  • Pingback: Take Your Design To The Next Level With CSS3 « Smashing Magazine

  • http://wwwwwwwwww jhuygtt

    tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

  • http://jaywebdesigner.carbonmade.com jaywebdesigner

    Nice ur css3 tutorial but it not for all of browser when i m checking IE6 browser rounded shape is looking plane box it’s means not supported.

  • Pingback: Tutte le nuove caratteristiche dei CSS3 « Beaver Magazine

  • http://www.themoxiemomblog.com Wendy Merritt

    Didn’t work for me. Checked it in Firefox and Chrome. I’m trying to edit the CSS in a WordPress theme.

    Blessings,
    Wendy

  • Pingback: 朝心 » [转]提升你设计水平的CSS3新技术

  • Nomaan Maniar

    Its really nice and helpfull

  • http://www.stalivyrazy.org.ua slovnyk

    really interesting, but i suppose all those features will appear not that soon as it is expected. now i’m trying to add decorative borders to my page, but i’m new to css and it is now for me almost impossible, so i’m in the process of finding the solution

  • http://www.apokat.co.nr Arnaud Foucher
  • http://www.thedaoofdragonball.com DerekPadula

    Thank you. I went through all 6 lessons and learned a lot.

  • Jesse

    For those who are looking for IE6 support for CSS3/HTML5: Don’t bother. IE6 barely supports CSS2, and support for IE6 is non-existent, even from Microsoft. STOP USING IE6! It came out 10 years ago!

    For the author: Thanks for the post! Great work. Looking forward to getting to use this.

  • Pingback: An (Almost) Complete Guide to CSS3 Borders & Backgrounds | kmsm

  • Pingback: Lynn's Blog - 网页编程|XHTML+CSS|HTML5|CSS3|AJquery|JS|AJAX|WordPress|Flash|Asp.net|Video

  • http://www.paragon9.com Josie

    Thanks for walk through of css3. Google Chrome supports css3 and you can get a google chrome plug in for IE users.

  • http://back2dlab.com/ Back2DLab Atlanta

    Thanks for your tutorial. We have our design interns go through these.

Subscribe
Membership
About the Author