Build Your Own Business Website header image

How to Use a Background Image in a Sidebar

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

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.

A member asked how to add a background image to his sidebar.  We use Firebug and Web Developer to identify the image and the various elements that will give him the effect he wants.  His site presents the challenge of already having a background defined that interferes with the sidebar background display.

Video Transcript

Okay so I’m going to start off… it seems like Dennis asked a question. He doesn’t have a microphone tonight. Okay so Dennis asked the question – how to use an image for the sidebar background. I am creating another site http…well let’s see, let’s just open it up and see what happens. And I want to use the same image as that being used for the page and the header background. Okay, so you’ve got let’s see… so you’ve got a background image here and you want to repeat that image again. How to use an image for the sidebar background? Okay, well let’s see if we can find a sidebar to do that in. okay, so we’ve got that sidebar background, I got you. Okay and so what we need to do, we need to start off with knowing what that image is. Let me just go back to this site here for a second, copy that address, open up a new webpage, browse to that. Okay, let’s see.

So if I understand you correctly Dennis, we’re talking about taking this yellow space here and putting this background image in it and so the first thing you want to do is figure out what the address of that background image is. So we’ll look at it in Web Developer, go to Media and then let’s see. So that must be the background image. Yeah, okay so then if we want to use that as… ‘coz one of your other choices here… so that’s the header. Yeah okay so this is it. So then the answer to that question is to just copy that URL and we’ll close this and let’s inspect that sidebar element, see what’s going on there and let’s scroll down here so we can actually see that. We look at the content box, it’s div id sidebars and sidebar1… what is causing that background color there? That’s an interesting question. Inspect the element, it’s not the content box. It’s not that… sidebars… where do we have that color? Sidebar1? It’s not the sidebar list or LI widget, those are too specific. I would have said… well, isn’t that interesting?

So we have to identify what this piece is right here, this thing right there. Inspect the element. Okay, it says it’s the content box. Div id content, div id content box. Is it page? Could be page, could be content area actually. We’ve got to figure out what that color is, let’s just search for that color. That color is that so let’s search for that, see where that’s been set. Well that didn’t work, maybe I need this. Okay, well there you have it. I don’t know where that color is coming from. Okay, header area content area. I think it’s a content area. It can’t be content area because… no, it’s not content area. Might be content area because you could… let’s see…background. Oh, there it is. That’s page so if we turned off page and I gather that’s not really the effect that you want. So we could take custom .page and add this background image to it so custom CSS and this is… it’s not really… well maybe this is full width page, okay. So if we go to custom CSS and we just fool around with it… .custom .full_width greater than .page and then background image image: URL control V… nope, oops. I lost that image name. Here we go, back to that… let’s see, back to the…now I’ve lost the whole image. Media then Uploads. Crazy. Okay, let’s just copy this for a second… copy. Oh, I’m on the wrong page.  No, now let’s go back to… let’s just refresh it. Oh I see, that background… let’s just refresh this. Okay custom CSS, I was just messing it up in Web Developer. Paste background image URL but it’s not that. Let’s misspell that for a second and look at our images again. Media, background header. We’ve got a disappearing background image here on this thing.

Let’s go back to these images and let’s see, view image information. That is crazy. Edit CSS. Dude, you’re stumping me. Inspect that element… oh my golly. Okay, so there’s our background image again, let’s just copy this instead of doing what I did before. Control copy, come back over to custom CSS. It’s .custom .full_width greater than sign .page and then 1, 2, 3… background image colon control V. Okay so that… well that got rid of that background color. Let’s see, what are the chances… I can’t see these questions very well. Oh look at that. Okay, I got that background image and so did you see that? See what I did here, Dennis? What I did was I took that section that had that background color applied to it and I took that background color out and I replaced it with this background image. Does that work for you? Okay. So I’m just going to copy this code and bump back over to the forum and paste it for you so you have access to it. Live Question answer code and then add a topic: background image code.

You know, it’s normally not that difficult to figure out. It’s usually more straightforward than that so sorry it took me a while. A little bit of flailing around but on the other hand, I guess you can see that when you flail around, it’s not unique to you that I often myself flail around trying to figure stuff out.

0 Comments… add one

Save $200 on Membership Now!

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

Leave a Comment