New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS: Page Layouts
Illustration by

Utilizing the background property


From:

CSS: Page Layouts

with James Williamson

Video: Utilizing the background property

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.
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
      54s
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 15s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 3s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 21s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 35s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 45s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS: Page Layouts
8h 57m Beginner Feb 07, 2012

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.

Topics include:
  • Reviewing the box model
  • Calculating em and percentage values
  • Controlling how elements display
  • Creating fixed, fluid, and responsive layouts
  • Structuring content with HTML5
  • Floating elements
  • Using relative, absolute, or fixed positioning
  • Defining column spacing
  • Creating grid-based assets and layouts
  • Considering mobile-design-specific issues
  • Working with multi-column text
  • Enhancing page design CSS Sprites
Subjects:
Web Web Design
Software:
CSS
Author:
James Williamson

Utilizing the background property

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.