Introduction to CSS3 – Part 6: Backgrounds
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).
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
PowerPoint & Keynote
Shopify, Tumblr & More
Landing Pages & Email
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:
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:
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;
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.
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 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
content. This allows for greater flexibility in terms of placing a background image.
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!