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

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Utilizing the background property

From: CSS: Page Layouts

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.

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.

Show transcript

This video is part of

Image for CSS: Page Layouts
CSS: Page Layouts

71 video lessons · 40101 viewers

James Williamson
Author

 
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

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

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.