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.

Lesson 5 – Part 3 – Style the Background

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

So we’ve got our images cut out of the PSD file and we’ve got our images uploaded to the site.
Now we’re going to start styling the background. Before we style the background with CSS, I want to just go take a look at the Thesis Design Options on the site.

Here we are on our site, you’ll notice over here that I have a matrix that you can download for the Thesis Design Options because we’ve got a whole bunch of design options we’re setting today so you can just download this and follow along if you so choose.

Define Background Color in Thesis Design Options

We’ll go over to Thesis Design Options and what we’re going to do right off the bat here is just make sure our outer page padding is set to 1 and come over to our Fonts, Colors and More and set our site background color to this dark blue gray color, 333949. We’ve got our site background color in here, we’ve got our page padding and what else do we need to look at quickly? We’ll put the page color in here and the page color is darker.

If we come back over and turn all these back on, turn the white off, banner logo, you can see we’ve got a darker bluish black color, that’s the page background color that we’re defining right now. Come back over here, hit Save and take a look at the site. There we go. We’ve got our page background color and we’ve got that dark background color.

Actually, this is the wrong background color and the reason it’s the wrong background color is way back when we did this background color setting right here. What we’re going to do now is just delete that, save that, upload style.css so we can let Thesis Design Options do its thing.

The reason why I’m defining this in Thesis Design Options instead of in the stylesheet is so that theoretically, somebody could change the color fairly easily. Come back over to this, Thesis Design Options, hit Save so we can get that style.css added, refresh it, now we should have our blue gray color there.

Add Background Shadow to the Body

The next thing we’re going to do is add the background shadow to the body. It’s going to just start off like this. We’ll say, background-image, colon, then we need the url, parenthesis, and the background image is stored inside of our images folder but the css file that’s being used is in the root of the Thesis Responsive theme folder so what we have to do is get back to the root of the theme, so its background-image:url(../lib/images/background-shadow.png); so there’s our URL.

Now, you could wrap the URL in quotes if you wanted to but a standard WordPress practice these days is to leave the quotation marks out so we’ll leave them out at the moment. We’ve got background-image, url equals this, we’re going to use the background repeat property, background-repeat:repeat-x; so it’s only going to repeat horizontally.

We’re going to give it a position, background-position: top center; that’s what we’ll do for the moment or I could say 0 and 50%. 0 would mean 0 pixels from the top and 50% would mean 50% along the width. You can do it either way but this is at top and center, we’re just going to save this and upload it. We will refresh our layout.css and refresh this, now you can see we’ve got that dark shadow going across behind this page. We’ve got our effects so far.

Multiple Background Images using CSS3

Now, we’re going to do the CSS trick. Most of what we’re doing today is relatively mundane CSS, however the one thing you may not be aware of is that CSS3 will allow you to place two background images in exactly the same HTML section which is why we did not use the shorthand property for this. We could’ve said background image and put the URL then repeat-x, top center and had it all in one line but because I want to do two images, I’m breaking it up to make it easier to write.

We’re going to take a look at w3schools for a moment. Go over to their CSS3 section and look at their backgrounds. We’re not going to look at background size or origin but we’re looking at the multiple background images. Notice that multiple background images can be added simply by putting a comma in between each one that we are doing. That actually applies to all of the elements of the background image.

We’re going to start off with this and I guess the other thing to say is that the images are placed in the order in which they show up here. They’re placed in reverse order. In this case, flower overlays tree. If we were to move this, now tree overlays the flower. The first one is on the top, the next one is below that, the next one will be below that and so and so forth so you can stack images like this.

Background Images Position

We want the texture to sit on top of the shadow. Let’s copy this, let’s place it, comma, space, so now we have both images, well actually, that’s 1 image isn’t it because the other image is named background-texture.

Now, I think I want the shadow over the texture, not the texture over the shadow, background-texture, background-shadow, background-texture. The background-shadow is repeating in the X direction. The other is going to repeat in both directions so we’ll say repeat and the background position here is top center and we’ll say top center again because that’s what I want to do with both of these things.

I don’t want the texture to move when the browser window moves so that’s why we’re using top center on both of these cases. Let’s go ahead and try that. Come back over to Thesis Design Options and save it, come over to Thesis BlueMasters and refresh it, there we go.

Now, it looks to me like this pattern repeats very nicely without any noticeable tiling. That’s what I wanted. Also, the background doesn’t shift so that’s why we use top center so that the background stays in place as we move this window back and forth. That got the main part of the background completed.

Style the Footer Background

The next thing to do is the footer background. We’re going to actually add a color to the footer area so that it goes all the way across and we’re also going to put the background image in that same thing, that’s pretty ordinary syntax. Let’s see, body, footer, we’re just going to copy this.

It’s not going to be body though, this is #sign footer_area and it’s going to be a single background image and that was what, it’s footer-bottom-bkdgrnd then it’s going to repeat only in the X direction and it’s not going to be top center this time because we’re going to make that bottom part fixed in height.

What we’re really going to do is say, bottom center so now it goes to the very bottom of the footer area instead of the top of the footer area. I think we may as well just add a background color and that background color is this color here which is 0f131f. We copy that, come back to our CSS, background-color, # sign, paste that in there.

The whole footer area is going to get this color where there’s no image, you’re going to see it and where there is an image, it’s just going to be behind the image and the image will stand out in front of it. Hit save, upload it, refresh the style.css sheet, refresh this and there we go. There’s our background image and there’s our background color.

Obviously it does not have the texture because the header area is sitting over the top of the body where the texture exists. We’ve got our texture to there, it stops, which is what we want, we’ve got our background color, we’ve got a background image. Now, we just need to make a few things transparent.

Make Background Color Transparent

In particular, what we want to make transparent is the header area .page and footer area .page. We’ve got footer area so now we’ll say, footer_area .page and it’s going to be background-color:transparent. Sometimes, what happens is Thesis uses a shorthand version for background so it will say, background and then give you a color but I don’t think transparent actually works well with a shorthand so I could be wrong. That was the footer area.

Let’s just come up here to the header area. This is header_area .page and we’re going to make its background color transparent, hit save, upload and refresh the screen. Notice how often I make an edit, I upload it and I test it? See that worked. Now the page itself has a color but the header, you can see the background through and the footer, you can see the background through.

The reason I do that is because often, you don’t really know exactly what’s going to happen when you write the CSS. You have a pretty good idea, you know what you want it to do. If you write a whole bunch of CSS and test it, what you end up with is potentially compounding problems that are very difficult to problem-solve.

However, if you make your edit and you test it, make another edit and you test it, and you make another edit and you test it, then when it’s not working right, you know exactly where it is not working right. It’s part of the process of teaching to show immediate result between the function and the appearance.

As a practical matter, I pretty much do it this way any way as I make a couple of edits, I upload them and test them and then move on. If you do a whole bunch of work before you check your work, it can be difficult to figure out why it isn’t working the way you expect it to be working. If you’ve watched me at all, you notice that I end up having to do that fairly regularly.

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