Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We saw, in our previous movie, how effective background images can be in enhancing your visual design. In this movie, we'll explore how you can exert more control over your background images through positioning the images within their container element. This allows us to create images that change based on user interaction and add accents to items, such as blockquotes and lists. In this example, we'll create CSS-based rollovers for our navigation and tweak our custom bullets so that they integrate with our list a little better.
So I have got the Resources file open from the 080_12 folder and something we've really didn't address in the previous movie was no navigation - where's that at? Well it's all there, but we just don't have any images filling that space so what's happened is the link that's being used for that is hiding the text. It is increased in size to allow for a background image to show up so all that's left for us to do is to choose the proper background image. Now the easiest way for us to do this is to use the CSS Styles panel.
So what I'd like to do, I'm going to just lengthen that a little bit, collapse the Files panel by double-clicking that and then scrolling through my Properties here. So what I'm looking for is this set of links right here, #baseNav. And I'm looking for the #baseNavs that apply to individual links, tours, mission, contact, resources, explores that's what I'm looking for, so you want to scroll through your list until you find ul#baseNav li a.tours, and we'll just through these in order, one at a time.
All right. The first thing I'm going to do is find the tours version and just double-click that. That's going to open it up in our CSS Rule Definition dialog box. I'm going to get a background and right over here I'm going to browse for my background image. Now I'm going to browse to the 08_12 folder and go in inside the _images directory, and we'll switch this to a Detailed view, and what I need now is the tours graphic. You may need to resize this so you can make sure you're reading these properly. What I'm looking for is tours_main.gif.
Now if you look to the right to the thumbnail of this, you're going to see in a very important clue is to what we're going to be doing here. You'll notice that even though its one long graphic, 817 pixels by 60 pixels, it actually looks like three of them. That's because there are three different states for a menu in a single graphic. We're going to use the positioning attribute of the background image to change that based on how users are interacting with it, or the current pace that we're on. So I'm going to go ahead and click OK, and I'm going to choose no-repeat because I only want to see one of these, and now we're going to take a look at Background Positioning.
Now Background Positioning can be either assigned to an x or y coordinate, and you could also think of those as horizontal or vertical. We do have some keywords that we can use, so if you grab the pulldown menu, you could choose left and top. That would align the top left-hand corner of background image with the top left- hand corner of its parent element. I'm going to go ahead and click OK, and I can see you're right there, our background image Tours is now showing up and lining up exactly where I want it to. All right. We need to go ahead and do that for the rest of those. So I'm going to go to mission, double- click that, go to our Background category and browse for the image.
Now for this one, we're looking for the mission_main.gif. I'm going to click OK. We're going to do no-repeat for the Background image and once again, left and top for the background position, Click Ok, and now Mission shows up. Next up is Contact, so I'm going to double-click that in the CSS Styles panel, I'm going to go to the Background category, and then I want to browse for this graphic. Now here we're looking for contact_main. Go ahead and just like the last two, no-repeat left and top.
Now we need to do the Recourses again. I'm going to go to my Background category, browse for this and in the _images directory this time, we are looking for resource_main.gif. Click OK, no-repeat because we only see it once, left and top. Click OK and finally, our last one down here is going to be Explorers. So we'll find explorers. Go to the Background category and here you're going to browse to explorers_main.gif, Background-repeat is going to be no-repeat, left and top. Okay, cool.
So there is our menu, and it looks fine, and it would work just fine, but we want to tweak this a little bit. You may have noticed, again, that this graphic was actually three graphics in one. Our sidebar over here is 272 pixels wide, and I'm just going to show you this opened in Photoshop really quickly and if I open up one of these in Photoshop, I think you can see this a little bit more clearly. So what we've got is for every 272 pixels, there is a new version of this. Now that means that if we change the position of this background graphic, based on some they say hovering over it, then that we can simply switch it from this one to this one by moving the graphic over to left or over to the right or whichever direction we need to do.
So let's go take a look at doing that within our CSS. So now back in Dreamweaver all we need to do is update two of our CSS Rules. I want to point out these in particular. We have ul#baseNav li a.current and then the same thing with the hover attribute applied to it to group together. That is going to deal with any page that's been identified as the current page. We also have this one, ul#baseNav li a: hover. What that rule is going to do is it's just going to affect any of those list items as they're being hovered over, as say someone's rolling over the links, and that's the one that we are going to start with.
So I'm going to go ahead and highlight that one out. You might be tempted to go ahead and double-click this and bring it up and good to the Background category, I'm going to caution you not to do that. Okay, the reason I'm going to say that is because we don't need to modify the Background property. We need to use the very specific Background Position property. If you double-click that, go into the Background category and start making some changes, you can override the changes that we've already done we don't want that. Okay, so here's what I'd want you to do. Go right down here into this Property section Add a Property, and you want to add the background-position property. Now again, you can grab that from the pulldown menu and choose background-position if you don't feel like typing that in.
Now when you're doing a Background- Position property, you can put two values into that. The first value will be the horizontal value, left, center, right. The second value is going to be the vertical value top, center, bottom. Now, you don't have to use those keywords that I just called out. You can actually use numeric values. So we know that that graphic is 272 pixels wide for each one of its different states. So in order to move it over to the left, all we have to do is type in -272 pixels and then, again, hit Space and type in a zero because I don't want to move up or down at all so I can just say -272 and zero and hit Return.
Now that's going to work for every single one of these guys because they all are going to do the same thing. They're just going to shift over by -272 pixels. Let's do something very similar to the rule just above that. So this ul#baseNav li a.current and then ul#baseNav li a.current:hover, it takes me a long time to say that and looking at it if you're brand-new to CSS, you've got to just be going, are you kidding me? But really its really simple guys. All this is saying is "Hey. "If there is and A tag, which is your link, inside of a list item, which our main "navigation is built out of a list, if that's inside of an unordered list with the id of baseNav, which this is then I want to do something." That's all that's saying, so there is really nothing complicated about it.
It's just targeting something based on its structure. Okay. I'm going to go ahead and add the same property to this. We're going to do background-position. Again, if you feel like typing it, you can just grab that from the pulldown menu. And now what I need to do is set some values there now. I would be tempted to go ahead and multiply 272 x 3, but I'm pretty bad at math, and I've got some keywords that can help me here. What I'm going to do is I'm going to do right space top, so we're back to using keyword. Now what is that going to do for us? Well that's going to take the top right- hand corner of the image and line that up with the top right- hand corner of the element.
So that's all we really needed and hey, look, Resources has already changed. If you were to place your cursor inside of resources you would see it says a.resources current so the class current has already been applied to this link, and we're seeing that work. Cool! Now we're going to see the hover in just a moment, but I want to make one quick tweak to page before we do that. Background positioning can help you with a lot of things and not just links. Take a look at the custom bullets that we made. Do they look a little high up to you? Well, that's because the top of the graphic is lining up at the top of the image.
It's not sort of centering there, so let's go ahead and modify that slightly. What I want you to do is, again, go back to your CSS Styles panel, scroll down until you find this selector right here, #mainContent #mainArticle li. Go ahead and select that. Here we have the background image that we added earlier. Now we can certainly do this here, but there's is no harm, no foul in double-clicking that and bringing up our CSS Rule Definition dialog box again here. Click on the Background category. We can see our star bullet, no-repeat, but we didn't do anything for background positioning either x or y. So what I want to do here is zero for x because I don't want it to move right or left, but for background position y, I'm going to type in 2 pixels. What that's going to do is its going to push the image down by 2 pixels, which as we see when we click OK, sort of just moves it down a little bit and centers it a little bit better on those list items. Perfect! All right. Let's do a Save All, preview this page in our browser and one of the things that we're going to see when we roll over these links now is that you aren't swapping out image graphics when you do this. You're simply moving that graphic to the left by 272 pixels.
But it gives you the nice illusion that you're swapping images out. Isn't that cool? By learning to control background image positioning, you can become much more creative with how your background images are integrated into your visual design, and you can add compelling techniques like this CSS-based image rollover that we did. There is, of course, more to using background images and their capabilities. I would invite you to check out any of the CSS-based titles on the lynda.com Online Training Library including my Dreamweaver CS3 and CS4 with CSS essential titles, where I have complete chapters on using background images.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.