Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
Perhaps no other property is of greater importance to designers in building page layouts than the background property. I know that's quite the claim, given how I was talking earlier about how important floats in positioning are. But backgrounds allow us to work with a creative freedom that would be just absolutely impossible without those capabilities. So in this movie, I want to highlight some of the incredible things that we can do with the background property. So I have backgrounds.htm open from the 08_06 folder.
A lot of the properties that we're going to be working with here, in terms of dealing with backgrounds, you've been doing already in the other courses that you may have taken, in your own CSS work, or even here. But I want to talk about using these background properties in a really creative way, of combining some of these techniques together. So just to give you an idea, in terms of the elements that we're going to be controlling, so we have this one section right down here in the bottom and inside that is a heading2 that says, "Backgrounds are amazing." If I preview that in the browser for you, it's not going to look that impressive, because, well, we haven't done anything yet, so it just says, "Backgrounds are amazing." I'm going to go up and I have a section selector and a section h2 selector.
Let's work with the section selector first. So I'm going to go ahead and assign a background property to that, and we're going to do a url. So we're going to assign a background image to it. Again, this is something we have done previously in this class. We're going to do images/gallery_banner. We haven't talked a lot about the syntax. I know in the CSS: Core Concepts course, I go through the background syntax a little bit, but we haven't really discussed it really in detail here. So whenever you use background shorthand notation, which is what we're doing here--we're not saying background-positioning; we're not saying background-image; we're just saying background--then you can pass in multiple properties.
In this case, we're passing in a url, which is saying I want you to go out and find a resource for me. And we're asking it to go find gallery_ banner, and I guess I probably should finish that, shouldn't I? .jpg. So we're saying go in the images directory and find this image, gallery_banner.jpg. Now we don't need quotation marks in there. It's not a literal string. It's a resource path, so it knows where to go and find it. Right after that, I'm going to type in a space and I'm going to do no-repeat. So that is our way of telling the browser, don't tile this background.
By default, background images are tiled. And we're saying don't tile it; only show it once. So if it was in a container that was larger than the background image, we wouldn't see any tiling or repeating. So I'm going to go ahead and save this, and I'll go back out into the browser and refresh it again and you can see that now we have our background image in place. So that's nothing earth shattering or new. We've been doing that for quite some time now, so what's so exciting about that, right? Well, there are a lot of really neat things you can do. For example, you can place more than one background image inside a background declaration.
So an element can have multiple backgrounds inside of it. It can have multiple colors. It can have gradients. It can have images inside of it. There are all sorts of really neat things that we can do. So I'm going to come right here to the same background declaration that we just did and I'm going to add another background to this. So I'm going to type in url once again, and I'm going to do _images/, this time b_border.jpg. And you need a comma between these.
So when you're specifying multiple backgrounds, in terms of this syntax, using the shorthand notation, use a comma- separated list to separate these backgrounds. In the first background image that we placed, we told it not to repeat. Of course, you also have the option of controlling how it repeats. And in this case, I'm going to tell our border here--which, by the way, is 50 pixels tall and it's about 100 pixels wide. So if we were to test it without repeating--let's just try that. I'm going to do the save on that and I tested it. You can see it shows up right there, and it's just this little piece of sort of rust-colored texture if you will.
It shows up in the top left-hand corner, which is its default position, and it also just shows up that one time. But we can control how it repeats. So I'm going to come in here and tell it to repeat-x. Our other option would be repeat-y, or just repeat. And repeat-x is telling it repeat along the X axis. So if I save this and preview it, you can see that now it's repeating horizontally, and it's just tiling for us.
I also want to control the positioning of it. I mean, if you look at this, you can probably tell that I really like to have the texture behind the text and not at the top of the image. So another thing that we can pass in as a property is the background position. And when you do background position, you pass the horizontal property in first and then the vertical property second. And so for my horizontal property, I'm going to type in left, and then for my vertical property, I'm going to type in bottom. There are keywords that you can use. You can use left, right, center, top, and bottom.
If you don't specify, of course top-left is the default. You can also pass in values. You can pass in percentages, and you can pass in length values. So I could say, hey, go ahead and adjust that 30 pixels over to the right. So if I save this, test it again, you can see that now the background is moving down to occupy the very bottom of that section. Of course, we have a defined height for this section element that's leaving us enough space to display both of these background images at the same time. So in terms of being able to move your backgrounds around inside of your elements, that's actually a very useful thing.
This skyline graphic that we have, for example, this is 1280 pixels wide by 350 pixels tall. Right now we're looking at the very left edge of that graphic, but we might want to view a little bit more of what we have going on the right-hand side. There are some smokestacks and some other elements over there on the right-hand side that are getting clipped off right now, that I'd really like to be a part of this image. So I'm going to go back into my code and now after the no-repeat for our bottom image, I'm going to hit space and I'm just going to do -300 pixels, space, 0.
So what the negative value is going to do for us is a positive left value moves it to the right; so obviously a negative value is going to move it back to the left. And doing 0 for vertical means it just stays aligned with the top of the element. So if I save this, go back in and refresh that again, you can see the image moves over a little bit. The Empire State Building is more towards the center of that, and then I get the smokestacks over there on the right-hand side. If I have an image that is larger than the element that it's displaying, then I'm free to move that around in any way that I want to. Now another thing about multiple backgrounds that I really didn't mention at first is their stacking order.
Whenever you use multiple backgrounds,--and I could have layered as many of these on here as I wanted to--the order that they come in does matter. The last element that you have in your list is going to be at the very bottom of the stacking order, and then the first image in your list will be at the top of the stacking order. The only difference in that is in colors. If you were also to do a background color declaration in here or a background gradient, which is seen as a background color declaration, those colors always show below the images, not on top of them.
And that is one of the reasons why I'm going to use this next technique of combining more than one element together. So in our section we have two background images. We also have that section h2 element, and you'll notice that I've given it a height of 40 pixels and a padding of 360 pixels on the top. What that's doing is it's pushing the text all the way down here towards the bottom, but it also means that that h2 is just as tall as the banner itself. So the height of the h2 matches the height of the section behind it.
That is important because one of things that I can do is since the section h2 is physically on top of section, I can begin to place other graphics or colors in the background property of that section, and then have them interact or blend, in a way, with the backgrounds behind them. And that's exactly what I'm going to do. So for the section h2, I'm going to go down to the next line, and here I'm going to type in background. And for this background, we are going to do a linear gradient.
So this is one of the more recent additions to backgrounds, the ability to do gradients, and you can do radial gradients and linear gradients. And what this allows me to do is go from one color to another, but I can also put multiple color stops in. And more importantly, the color declarations themselves support the rgba or hsla alpha transparency. So in this case, what I want to do is I want to change the tint of that sky. I would like to see a little bit of blue up in the sky sort of maybe fade down into that sepia tone.
And so to do that, I'm going to do a linear gradient that starts at blue and then just sort of fades out into transparency. And because these two elements are going to be layered on top of each other, it's going to give the illusion that it's all part of one image. So I'm going to do linear-gradient and for the syntax, you just go ahead and open and close your parentheses. The first thing I'm going to do is I want to tell it to start from the top, so I'm going to do top. And then I give it a color to start with, and I'm going to do rgba and then inside these parentheses, I'm going to do (153, 210, 240, .8) so 80%.
So I'm not going to start off at 100% with this color; I really want it to blend with that background. After the rgba declaration, what I'm going to do is I'm going to do 0%, that is, where this starts at. So the direction of the gradient is starting at the top and going to the bottom. , And this first color stop, if you will, is going to be at 0%, meaning it starts at the very, very top. I could start it at 20% or 25% down. Really, it's up to me as to where I want that to start at. Now I can go to my next color, and this gradient is only going to have two colors, but I can put multiple color stops in here if I want to.
I'm going to do rgba again. This time I'm going to do (153, 210, 240). Now you might notice it's exactly the same color. But this time for the alpha value, I'm going to give it a 0 so that's going to be totally transparent. So it's going to stay within this color range, but it's just going to fade out to total transparency. Now I could go all the way down to 100%, which would take this gradient all the way down to the very bottom where it would fade out. But actually, I don't want it to cover up the whole sky; I just want it to cover up the top portion. So for percentage-wise, I'm going to do 60%.
I don't want to forget my semicolon on the outside of the syntax. I'm going to save that. And so the syntax looks a little daunting the first time you see it, but after working with the syntax and understanding what all the stop points do for you, it's actually very, very simple syntax to use. So I'm going to save this, I'm going to preview it, and nothing happens. Well, it doesn't mean that you did the declaration wrong. Essentially, support for linear gradients is recent, and actually gradient syntax is one of those things that's really undergone a lot of change over the last couple of years.
So when you're working with linear gradients, or gradients of any type, one of the things that you're going to have to deal with are browser prefixes. So I'm going to copy that and I'm going to paste it one, two, three, four times, because one of the nice things about these linear gradients is they are supported in so many different browsers. So what I'm going to do for the first one, this one is a little different. Instead of putting the vendor prefix in front of the property itself, this time you put it in front of the value. So for linear-gradient, I'm going to -moz, and then for the second one I'm going to do -webkit.
Remember, dash is on both sides. Then for Opera I'm going to -o. And then for Internet Explorer, I'm going to do -ms. And that will cover all of my major browsers. I'm going to go ahead and save that, and I'm going to go back into my browser, test it again, and there is our blue sky. How cool is that? Now I've just got one more thing I want to do here, and although it doesn't have anything to do with the background property per se, it has everything to do with what I talked about earlier, which was taking the properties that CSS gives you and thinking about using them in some really creative ways.
So this heading2, we've placed this background: linear-gradient on it. We haven't really done anything to the text itself. Certainly we have styled it a little bit differently. You will notice this is all uppercase. We have a lot of spacing between it. But I'm going to add little bit of special effects to the text as well. I'm going to do a color declaration, and I'll do rgba, and I'm going to do 0,0,0, which is the color black, and then .8. So I'm going to have semi-transparent text that's black. And then underneath that, I'm going to do a text shadow, and for the text shadow, I'm going to do 0 0, so those are offsets, right? X and Y offsets of 0. I'm going to do 15 pixels for the blur, so it's a pretty big blur.
And then I'm going to do #ccc, which is a light gray. I'm going to follow that with another text shadow. I can actually, just like backgrounds, I can string text shadows together. And the second text-shadow, I'm going to do 0 and 0 for offsets, 4 pixels for the blur, so not as much blur, and then for the color, I'm going to do white, and that's going to give me sort of a soft outer glow and then a really bright sort of inner glow. So if I save this, go back into my browser and preview it, you can see exactly what I'm talking about. One more thing before we move on to our next movie. Looking back at this syntax for the linear-gradient, yes, it's a little code-heavy.
You can see we have actually five different declarations for linear-gradient, but it's one of the prices that we pay for supporting some of the newer features in CSS. And to be quite honest with you, this is nowhere near cross-browser compliant. If you want to utilize these linear and radial gradients in your designs--and I'd certainly encourage you to do that--I want to take you out to a site that you've probably seen if you've watched any of my other titles. This is the Ultimate CSS Gradient Generator, and you can find this at colorzilla.com/gradient-editor. And one of the things I really like about this is if you're familiar with building gradients in Photoshop or Illustrator, it kind of works the same way.
You can just come in, you can start picking colors, and you can start building your own gradients. The CSS code for that is shown over here in this panel on the left-hand side. You can include Internet Explorer 9 support if you want, and then you have code that you can just copy and paste. Now as you can see, this code is not for the faint of heart. There's a lot going on here. But what I really like about this is these guys are really staying current with the syntax. They understand all the changes that's been made to the syntax. They understand what's involved in supporting gradients in older browsers.
And as much as you can, you're going to get cross-browser compliant syntax out of this generator. So I highly recommend using this. Back to the photo composition that we created here. I hope this exercise has gotten you interested in experimenting with CSS backgrounds and how you can combine them with other properties in really creative ways. The amazing array of background properties and the options that we have for those properties, it makes backgrounds an amazingly flexible design tool for page layout. Now in our next movie, we're going to explore CSS sprites, which is yet another creative method for using the background property.
There are currently no FAQs about CSS: Page Layouts.
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.