This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to Part 3 of Lesson 9 of the Build Your Own E-Commerce Website tutorial series. In the third part of this lesson we are going to add a background image to our full-width framework header area.
Getting the Background Image
The first thing we’re going to do is use this handy little web developer tool that shows us the images. If we click on the Standards Compliance Mode and then come over to Media we see these lists of all the different media elements or images. If you look at that list you can see that this is currently in thesis themes 17/custom/images/top-background.gif. That sounds like that’s probably the right one so click on that.
Now you can see how big this image is. Over here the image extends all the way across but that’s because it’s a background image. The background image is repeated from left to right. Even though this appears to only be green with a little gray at the bottom and sort of a variegation there’s actually a white section up here that you can’t see because the background is white as well.
Anyway this is our image and what we’re going to do is to save this to the appropriate location on our hard drive – estore, wordpress, content, themes, thesis 1.8, custom, images and I’m going to go ahead and save that right there so we can access it add it to the header area
HTML and CSS of Header Area
Now I want to take a look at the HTML and the CSS that does this so we’re going to select on that section and hit Inspect Element and here we are. This is the div header area, all right, that’s what we’re talking about and if we look over here on the left we can see that we didn’t actually put this image in the header area. We actually put it in the body and the reason did that was because we wanted the whole image to show regardless of how thick the rest of it was. So we opted to put it in the body rather in the header area, and you can see that is custom styling, body.custom with this background image of this and a repeat of that.
We could have chosen to place it in the header area instead and in fact I think that’s what I’m going to do for the purpose of this lesson rather than doing it how I created it here. I think I’m going to put it inside the div_id=header_area instead.
First, we need to upload our background image. Come over to FileZilla there’s the image we just put in there. Let’s upload that to our site and then let’s come back over to the Thesis e-Store and open up Web Developer. Go to our custom.css and before we make any changes here I would like to take a brief look at W3 Schools. Come back over to this other browser and open up W3 Schools. Go to the CSS and then look at Backgrounds. Scroll down here to Background Image you can see that this is the syntax for background-image, background-image:url etc. It says that by default the background-image property repeats an image both horizontally and vertically so we’re going to want to change that so it only repeats in the x direction.
Just copy this for a second and go back over to here, open up our custom.css, we’re going to go up at the top to put this. So .custom and then you can see we want to go into header area so we’ll space, pound sign, header, underscore, area and then an opening bracket, closing bracket, up, indent, and then we’ll paste that information. So now we’ve got the code the way it was shown. Obviously this is not the right address though, right? But we’ve got our background-image:url and our background-repeat only in the x direction which is this direction.
Now we are going to replace this erroneous name with the correct name. So we’ll start off by getting part of the address from up here in between the single quotes and then we will get the rest of the address from FileZilla. We’ll start at wp_content and go through images. I like doing it this way, it saves me typing. Put another slash and then go get the name itself which is top-background.gif, copy that name, put it right there.
There we have it. Now you can see that this spans all the way through. Interestingly though you’ve got this white that covers it up and that white is actually the page color. You can see that here if you go to div_class=page. You can see that full_width .page has a background color of FFF…, so what we’re going to have to do here is to make the background color transparent.
Then we’ll come back over here to our custom #header_area and now we’re going to say, .custom, that’s going to be header_area class page, header_area.page and then it’s going to be opening brackets, closing brackets. What we’re going to say is background-color: transparent. In some browsers this might not actually render properly because this says background rather than background-color. So I think we’re going to add one more call here and we’re just going to call it background because I don’t think that works in IE.
Doing this should work in all browsers. Now we’ve got our background the way we want it so go ahead and copy that code that we’ve just written, go back to our text editor, open up our custom.css, here we are at the top, come down there, paste it. Before I get too far down the road what I really want to do to put some comments in this so I am going to put one there and it’s going to be Header and then I’m going to put another one here and I’m going to call that Content. Then I’m going to get rid of a whole bunch of this and we’re just going to call it Thesis eStore 9.
Save that and then come back over to FileZilla, back up to custom.css, upload, come back over to our site, refresh it and you can see that it works properly.
So let’s take a look at that change in Chrome. Okay, it looks proper there. So now let’s open up Internet Explorer and do the same thing. Okay, it looks proper there.
That wraps up Part 3 of lesson9, Add a Background Image to the Header Area.