Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Many of the existing features in CSS 2.1 have been improved or extended. That's the case with CSS backgrounds which get a host of new capabilities in the CSS Backgrounds and Borders Level 3 module. In this movie, we are going to take a look at some of those new capabilities before getting to work with them in an exercise. First, I want to take a look at background sizing. Using the background-size property, you can now control the size of the background image as it's painted into its container element.
You can specify sizes in lengths, percentages, or the use of two keywords. If you're using values for size, you can specify a width and a height by passing two values or a single value for both measurements. The keywords, contain and cover, allow you to scale the image while preserving its aspect ratio so that it fits the containing element. Contain makes sure the entire image fits within the containing element, even if the width or height doesn't exactly match one of the sides.
While cover ensures that the element fills both the height and the width, even if clipping occurs on one side or the other. The background-repeat property has a couple of new values as well. Space and round allow you in theory to change how repeating background images are spaced. Space will repeat the image as many times as it can within the container without the images being clipped. Then remaining space will be distributed between the background images.
Round will perform the same function but instead of distributing space, round will scale the background images so that they fit within the container with no clipping. Unfortunately only Opera 10.5 supports this currently. So this is one of those features of CSS3 that we are going to have to wait for. Now probably the most anticipated addition to backgrounds is the ability to have multiple backgrounds. This allows you to stack multiple background images within a containing element.
The design implications resulting from this are huge and this technique is going to go a long way into reducing the amount of extra markup needed to achieve a certain designs. To layer multiple backgrounds, you simply provide comma-separated background declarations. If you're using the background shorthand notation, that is. Now if you're passing other background properties through individual declarations, you simply pass comma- separated declarations for their value, which will then be matched with the appropriate background.
If only one value is declared, it's used for all backgrounds. Background-origin allows you to control where the starting point of the background is for the containing element. There are three keywords that allow you to change the origin point of your background image. Padding-box is the default and it sets the origin point for the background in the top left-hand corner. Border-box moves the point relative to the border box itself to the outer border. Now remember that borders paint over backgrounds, but this does allow you to move where the image starts at to the edge of the border itself.
Content-box allows you to move the origin to the top left-hand corner of the content box itself. Now these are minor changes but they can have a huge impact on how backgrounds display. Finally, the background-clip property is very similar to the background-origin, except for the fact that instead of just modifying where the image starts displaying, this defines the area that the background is painted into. It uses the same keywords as background-origin and defines the same area. Padding-box is the default value here as well and it basically paints the background all the way to the edge of the padding box.
Border-box paints the background all the way to the very edge of the border. Again, even though the border will paint over the background, it just sort of extends where the background is painted into. And finally, this one is really interesting. Content-box, this means that the background is only painted into the content region itself and it basically stops at the edge of the padding and you can really create some interesting effects with that. Now support for these new features is fairly varied across browsers. Background-sizing is supported in most major browsers and should be added for Internet Explorer 9.
The new values for background-repeat, as I mentioned, is currently not supported except for Opera 10.5 and above. Multiple background images, you'll be happy to know, is well-supported across most browsers and should be added to IE 9 as well. Background-origin and background-clip are all supported for the most part but I do need to point out that implementations differ and keyboard support can be buggy. Wow man, that was a lot. So now we have covered some of the new background features in CSS 3, let's go ahead and try them out.
We are going to start with controlling background sizing in our next movie.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.