Welcome back to Part 5 of Lesson 9 of the Build Your Own E-Commerce Website tutorial series. In the fifth part of this lesson we are going to add a background image to our full-width framework footer area.
Let’s take a look at what we’re going to try to accomplish. If we look over here at the demonstration ecommerce site and scroll down to the bottom this is what we’re going to do. We’re going to add this background image which is actually one large one – the green, the line, the two shades of green and the other line. If we inspect that element you can see our footer_area and if we open it up there’s div_class=page. So in this area we have this background image url and that’s what we’re going to put down there at the back.
Inspect and Upload the Image
Let’s use this tool to grab that; switch to Media; we’re going to scroll down to probably the bottom – there it is – footer background 2 and that one has the green, the line and then the two shades of green all the way up to top, it’s 10 pixels tall and 450 pixels wide. Go ahead and save it as footer-background2.gif. Okay we have that, now let’s upload it – images, upload, and so now we can go back to our site and do the same thing we’ve done before.
Customize the CSS
Scroll down here to the bottom and we are looking for our footer area. You can see it is right here and that’s the thing that we’re going to put this in. Open up custom.css and copy this. Go all the way down to the bottom. Go below the content and it’s not going to be Header it’s going to be Footer and then instead of header_ area it’s going to be footer_area. You can see it put that old image there but instead of top-background.gif we are going to use footer-background2.gif. Copy that name, paste it in place, okay and then we’re going to have to give this a height. Remember that image was 450 pixels tall so let’s just go ahead and start by making this 450 pixels tall.
Now what that does actually is it shoves it down here. We’re going to end up needing to give it a height as well and for the time being we’re just going to give our footer a top padding. We are going to make page be transparent as well. So again what we’ll do is copy custom #header_area .page and all we’re going to do is paste it down here and change header_area to footer_area.
Then we will do a .custom because we’re going to give this a top margin. So .custom #footer, space in and call it padding, hyphen, top, colon, call it 400 pixels. Now let’s drop it down a little further –380 – 360 – there we go.
That is completed for the time being. This is going to get restyled when we put all the rest of the elements in (see Chapter 11). What we’ve done here is we have now created this layered effect, top header, content area, and footer area.
Let’s go ahead and copy all this info – copy, come back over to our custom.css file, scroll down to below content, give ourselves a space, paste this new content so now our footer area is in there. We can say Save Document and then we are going to upload that document and then test it. First in Firefox which of course it works, and then secondly in Chrome and it works just fine, and finally in Internet Explorer – and it works fine there.
That brings us to the end of Part 5 of Lesson 9, Add a Background Image to the Footer Area.