Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Style the Header Using Skin Design Options

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Now that you know where you can style all the built in background areas in the Agility Skin for your professional services website, we are going to look specifically at styling the header.

Right now I’ve got a white background through here and I don’t want that. I’ve actually got this graded background from kind of a lightish beige to darker beige. This is a background image so I want to put that background image in this section.

And in this section I want to make it green instead of that orange color. So those are the immediate changes that I’m going to make to this header style and both of those are inside this background area.

And so we’ll start off with the top header area background which is fine so we’re don’t need anything there but the header area background is what we want to change.

Note that typically with these backgrounds all you to set a background color and in that case you can choose one, specify one. You can give it opacity if you wish and that allows you to see through it. You can set that here.

Add Background Image

You can also set a background image and all of the various elements associated with a background image. You can generally customize padding one way or the other. Customize margin one way or the other. And also customize the border. We are going to look at all of that as we work our way through this.

Upload Your Image

But in terms of the header area background we want to put that background image in. So, I’m going to check to “show background image options”. And actually, the first thing I need to do is upload that background image and get its URL.

I’m going to come over here to the media library and say “add new”. Then I’m going to select the file.I’m looking for my header background image which is this right here. Obviously the background image is like 20 pixels wide. It has a little bar here for the menu but we don’t need that any longer. This is from way back when but I’m still going to use the same image.

Let’s say “open” to that and then click edit. Grab the URL. Notice it’s 20 pixels wide and 202 pixels tall. So I grab that URL and now I’m going to come back over to the header area background. I may have to reload that to make it pop up but…header area background.

Set the Position

Show the background image, insert the URL and then in terms of background image position “left-top” is fine. Background attachment default is fine. Background repeat should just be “repeat in the x direction” which is horizontally.

At the moment we don’t need any padding or margin or border so let’s save our background options. And reload this. There we go. There’s our picture across there.

Add Background Color

Then the next thing we want to do is style this top menu area background. And so we’ll go to our top menu area background and we’re going to choose the background color. And it’s our canonical green. That’s the color it should be. And save that and reload.

There we have it. We’ve got that color and then we’ve got our green here and once we finish editing our menu colors that’s going to show up nicely there too.

We have just 2 areas left to style in this lesson on Adding Style and Content to the Home Page: the background of the feature box and the footer.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment