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.
We will start to explore the new CSS3 background capabilities by examining the background-size property. Now, we are going to start by exploring how fixed sizes can affect background images, examine the keywords that are available to us, and we are finally going to see how percentage based sizes can make our layouts even more flexible. So here I am in the 06_07 folder. I have the background_sizing opened up and just to give you as an idea of what we are going to be working with, if I scroll down, we have a very simple page structure.
Three div tags inside of a wrapper div and their existing styles are currently displaying them just as these different sized shapes. Now, we are going to use the same background image for each of these and that's one of the really cool things about using background sizing, is you can take the same image and repurpose it throughout your site and if you plan properly, the scaling won't really affect it. Now the image that we are going to be using is a 150x150 star icon. So we are going to use that on all three of these initially.
So I am going to scroll up and find the #wrapper #one selector and just under that, I am going to go ahead and add a background. We do have a background color already assigned, but I am just going to go ahead and assign it again to make sure it gets painted in properly. So we are going to do background: #e1d8b9, there we go, and then I am going to follow that up with url(_images/star_icon_large.png) and then we are just going to do a no-repeat so only see it once, and now we are just going to save this.
So this will be our control, if you will. This will be the one that we are not going to resize and if I preview this again in my browser, I can see, there is our star icon and at a 150x150, it fits that one perfectly. Okay, now I am going to go back into my styles and I am going to go ahead and copy the background itself and paste that into wrapper two, there we go. Underneath that, I'm going to add my background sizing properties. So I am just going to do -moz-background-size.
Now, I am going to be very explicit with this size. I am going to pass in 50 pixels for the width and 50 pixels for the height and I am just going to go ahead and copy this, paste it a couple of times, replace the moz with webkit, and then just get rid of the moz so I have one default styling of that. So, I am going to save that. Now, if I preview this again, I can see that I have the exact same star. Now on different devices, your scaling is going to cause different issues.
At this particular resolution, Firefox seems to have a little trouble scaling that and if I look at it in Chrome, it's a lot smoother. If I look at it in Safari, it's a good bit smoother. Now, I do want to say that on the Mac on Firefox, it scales really, really smooth. So again, this is just one of those properties that you are going to want to test to make sure it's doing what you have expect it to do. Now, I am going to copy all of those properties, the background and the background sizing, and paste that into the wrapper three and just make some slight modifications.
Now, one of the first things I want to do is scale it down even further. I am going to scale it down 10 pixels x 10 pixels. So I am going to do that on all three of those and then instead of saying no-repeat, I am going to repeat this along the Y-axis. So I am just going to say repeat-y, save this again, and preview this, and we will start off with Chrome this time. You can see that the star is being repeated and it's shrunk down again. We will look at that in Firefox and we will look at it in Safari. Cool! Now, what I like about this technique is that essentially I am using the same artwork and I'm simply repurposing it, so that I can use it in smaller sizes.
Now scaling down, even though we do notice some image degradation throughout the examples that I have shown you, scaling down is definitely preferable to scaling up. Scaling up can really make something look bad. So, if you're planning on reusing a set of icons or something of that nature and then scaling that down, I would recommend always scaling down a scale instead of scaling up and testing a little bit with it in the different browsers to see how it renders and see if there is any image quality degradation. Right now I am going to go ahead and close out of that. Now, I want to test for a moment the keywords available to us in background sizing, and to do that we are going to modify the page layout just a little bit.
I am going to go ahead and get rid of divs two and three, just leaving the single div. If you want, you can go ahead and delete the selectors for them as well to avoid confusion but honestly, they're not hurting anybody by being there. Okay, the next thing I want to do is I am going to change the height of my div tag here. I am going to change it to 250 pixels wide to 320 pixels tall. You may have noticed that that's a different aspect ratio than the image itself. Now the next thing I am going to do, and if I had been smart, I would've copied and pasted those but I think yup, I still have them.
What I am going to do now is do a little bit of background sizing using the keywords instead of these explicit values. Now, we are going to be scaling up, so we can expect some image degradation based on which browser we are going to be looking at it in. But this is going to sort of highlight what the values contain and cover do for us. So the first thing I am going to do is contain. So I am just going to use the keyword contain for my background sizing and if I save this and preview it, you can see that what it's doing is it's scaling it up, but it's not fitting the entire element.
Contain is going to go until it either reaches the full height or the full width, whichever one reaches first. Then it's going to stop. So the height stopped and did not keep going. Now, let's try the other value, which is cover. I am keen to see how Firefox is going to render this one, so I am going to preview that in Firefox. Oh yeah! Now notice that cover kept going. It filled both the width and the height, which made it scale of course much higher and it also clips it, so it's only going to be able to display, obviously, inside the elements area, so some clipping is going to occur there.
I think we will see a similar result in Safari. Indeed. We are scaling it up so you are definitely expecting some image quality falloff there. Okay, now the last thing I want to test here real quick is how background sizing can help us when we are using flexible layouts. So what I want to do now is I want to go up to my wrapper selector and I am going to change the width from 760 pixels to 50%. So it's going to shrink this down so that the wrapper container div tag is only 50% of the available browser's size. Then I am going to go down to wrapper one and I am going to change its width to 50% as well.
So it's going to be 50% of that. Now I can go down to my background sizing properties and I can just go ahead and tell that I want that to be 100%. So 100%, 100%. Okay, if I save this and then preview this in one of my browsers, I now have a flexible layout. Notice that if I resize the browser window, not only does the element's width resize, but the background image in it resizes as well.
It makes that incredibly flexible. Now, obviously, image quality there is a huge factor. Let's try that in one of our other browsers. Try that in Firefox. So depending upon on how large this background image could possibly scale, you are going to want to make sure that you have a version of it that's going to look good at that particular size. Now, that's extremely helpful for flexible layouts. it really gives us a capability that we haven't had before. So, for me, those two things really stand out. First, it's going to make it a lot easier to reuse icons, like we were doing originally, making smaller images throughout my sites, just using the same icon.
Second, that ability that we just practiced there, the ability to add percentage based backgrounds, images to flexible layouts, it's going to eliminate a lot of the workarounds needed to make those layouts scale properly. Now, of course, this property does open you up to potential problems. Scaling images up can cause serious image degradation or image quality loss, so you want to be careful about how much scaling you allow in your layouts. But if you plan carefully, this is definitely one of those properties that can really help you out when creating your layouts.
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.