Now we’re going to move to styling the header area itself. Remember that our goal is for it to look like this, right? So by time we’re done, this is what that heading area and the top menu is going to look like.
Relationship of Packages to Sections in the Agility Skin
Let’s come back over and take a look at our Agility Skin CSS Cheat Sheet. You need to have an understanding of how these packages relate to Agility. And that’s really what the majority of the rest of this cheat sheet includes, it’s essentially a little diagram showing you the relationship of each package to a specific section in the skin.
What Packages are and Using Packages
Let’s come over to our css editor here and you can see this list of packages. Packages are essentially styles. They are group of styles that are applied to a specific part of the template.
Set Background Color
For example, let’s say you want to set the background color for the header area. You would just click this package for the header area. Remember that the header area encompasses this section up here; it’s the whole header from left to right, all the way across. That’s the header area. And if you wanted to set a background color, you would open up the options and open up the background. Click in the background color and choose or set a color. So we got a color there.
Let’s hit save to that and you can see that has set the background color for that whole section of the header area. And that’s how it would work if you want to apply a color. That’s how we’re going to apply color, for example to the top menu area and the top footer area and the bottom footer area. We’re going to do that using background colors.
Add and Use Background Images
In this case here we’re actually going to use a background image. And the background image is a narrow strip of about 20 pixels wide that extends from the top of the header down to just below the menu. And in fact, the background image has this kind of gradient brown and then that green and this little white line and then a little gray line. That’s what creates these things. So you’ve got this one background image.
And in fact, let’s just look at that background image for a moment. Let’s see, let’s just look at this image. It’s just 20 pixels wide. We’re going to take this background image and repeat it. That’s how these kinds of stripey-looking websites work is that you take a background image and make it a slender piece of that image. And then repeat it all the way across rather than say, have a really large background image that you would extend all the way.
It can be that your background image is not repeatable. And so if your background image is not repeatable then that’s not going to work. But in this case, we’re going to use a repeatable background image or what we call a tiling background image.
And so the way to start doing that is to come over here to images. And inside this images folder, we currently don’t have much. We’ve got a couple of different textures that I’m not actually using in Agility Nude but we could use here.
Repeating the Image
So for example, I could take this texture, copy that URL, come back over to css and back to header area. I’ve got this background color there. I could paste the background image and then come down and set the settings. Right now, we’re going to leave background attachment as default and we’ll leave background repeat as repeat.
What’s going to happen is that little square linen thing is going to fill the entire header area. Let’s save that and now you can see that little linen image which was semi-transparent shows up. You can see that the color below it shows through and it gives a little bit of texture here. We could change out that for another one instead. Come back over to header area, background, change the image. And now it’s a lighter bit of background.
Well, here’s what it looks like if you don’t repeat it. Let’s say no repeat so it’s only going to show up one time. That’s what it looks like if you’re not repeating it because it’s only there once. It’s one square and all the rest of the time, it’s not being repeated.
Adjust the Position
And you can also adjust its position. For example, you come here and go down to background and background position. You could say top center as its position. And in its top center it’s going to go to the top of its space and it’s going to go to the middle of the available space and just sit there. And then you could, in fact, now you can make it repeat, take it back to its regular repeat.
For a responsive site, this is usually the best position to use. It’s usually best not to leave this alone but instead to say top center. That way when the browser window adjusts, the image stays centered in the browser window. So hit save, save css and take a look at it. And that’s what that looks like now with this background in here.
Upload and Add Background Image for our Site
Well, this isn’t exactly what we want though. We want to use this other background image and so I’m going to upload that background image. Choose the file and documents, my business websites where I think I’ve got a copy of it. Images and then there’s this header background image. I’m going to say open to that and then add the image.
Add the Image to the Skin
And if you scroll down here, you can see that image is here and it says that that image is 20 pixels wide and 202 pixels tall. I’m going to copy this and come back over here to css. And this is going to probably seem a little strange to you but I’m not going to put it in the header area. I’m going to put it in the body.
We come over to the body background, put the background image in, give it top center. I’m going to leave repeat default here so you can see what happens. But ultimately, we’re only going to want to repeat it horizontally, repeat in the X direction. But let’s just go ahead and save that as it is.
The colors are covering this up. If we take out the heading background or the header area background for a moment, options. Well in fact, I’m going to take it out period because we’re not going to use the background area of the header for this anyway. You can see what happens is it puts the image in and then it puts the image in again and then it puts the image in again and then it repeats both in the X direction and in the Y direction.
Repeat the Image Horizontally
Now what we really want to do is just repeat it in the X direction. Y is vertical, X is horizontal. So we’re going to come over here to the body and under background, we’re going to say repeat X that is repeat horizontally. And now, you don’t see it down here anymore. It’s just repeating across horizontally.
Review the Image Placement and Make Adjustments
The green part of it is hidden by this menu at the moment. You’re not going to see that green part… well in fact, we can come over to the menu and just delete the background. We’ll come over to the top menu area, go to our options and background. Notice this funny thing here, this $bc1? This $bc1 is a variable and I’m just going to cut it out for the moment so there is no background color and hit save.
And now you can see this color that used to be going all the way across stops with the menu. It doesn’t show up anymore on the edges because we’ve taken the color out of the area and so it’s transparent now.
Why we Added the Image to the Body instead of Header Area
Let’s just reload this so we can really see that. Now you see the full height of this image and this is why we put this background image and body rather than header because that green color is going to sit behind the menu. And if we made it just the background image of the header area, the green would be cut off because the header area only extends down to here, down to the top of the menu.
So you’d never see this green bar anymore because it’s only in the header area. But because we put it in the body, the body is the entire page. It’s the whole section of the browser window. And so since we put it in the body, it’s going to extend it down below the menu, as far down as the image is. And that’s why you put it in the body, rather than putting it in the header area.
You could have put a color in the header area and a color in the top menu area and accomplish something very similar to that. But I wanted you to just see what happens when you want to use a background image that spans more than one of these horizontal areas, the header area and the top menu area.
Add Varying Sizes of Header Area Image for Responsive Behavior
We have our background image here. Now I want to go back and fix this logo or the image here in our header image. We’ve got our header area, header area page and remember this is our front page header. And we said it was going to have a header image.
Now I’m going to put images in here again, similar to what I did last time. In fact, we will open this up in a new tab and go to the Media Library. First I want to get the full sized header image. Okay, next I’m going to get the header image for 800 pixel wide and higher which is this one here. Then I’m going to get that image that shows between 500 and 800 pixels wide. And then finally, I’m going to get the one that shows on everything below 500 pixels and that’s a 300 pixel wide image at that point.
Okay so now I’ve got all 4 of my images set up. I’ll go ahead and save the template. And now I have this configured so that I’ve got the image the way I want in each of the different views.