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.
Often some of the subtlest changes are the most effective ones. Being able to control the origin point for your background images in terms of where they start is not something you're going to using in every single project. However, having that amount of control over our background is important and it will make positioning those images a lot easier when we do need to use it. So I have the background_origin.htm file open. Let's take a look at what we are going to be doing. So here I have a very simple file, you can see it just has a single div tag, and if I preview that in one of my browsers I can see that we have a background image already specified for this.
Now the light border that you are seeing around this is the border itself. It has a semitransparent color to it. So as we move our background image around we'll be able to kind of see what's going on there. Right now our background image is positioning in its default position, top left-hand corner, and it's positioning with a background origin of the padding box. So the origin would be this corner right here. Let's take a look at how we would change that. So I am going to go into my code and in this wrapper #one selector below the existing code, I am type in -moz- background-origin and I'm going to set that equal to content-box.
Now I am going to copy this and I am going to paste this two more times. I'll change mozilla to webkit and then I'll just remove the vendor prefix altogether. So now you may have seen this in other places and you may have seen this written out instead of content-box as just content. That is supported by all the browsers and all the implementations but here's my worry with that. In the W3C specification it's listed as content-box, not as an optional value.
So while the shorthand content is supported, I'm hesitant to use it at this point because the specification still requires the -box. So we'll see. All right, so if I save this and test it, I can see that now the origin point for my background image is very different. There's a little bit of padding on this image so really the origin point is about right here. That's where my background image is starting to paint, which is kind of cool actually. Now let's change that. I am going to change it from content-box to border-box and I am doing that for all three of these guys.
Same thing with border-box. The -box on it is supposedly not needed, but I'm hesitant to take it off. We'll save that and test it again, and now you can actually see that the origin point of the background image is now all the way out to the edge of the border-box itself, not the content-box. It's a very subtle difference but it is a difference that you might need in a project or two, so it's very nice that we have that capability now. So I have already said that more control that you have over any property the better.
Background-origin extends your control over your background images by allowing you to determine exactly where your background images start drawing. Now this is going to make offsetting your background images a lot easier and it's going to finally add the ability to ignore padding in relation to the start of the background image, which is really cool.
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.