Build Your Own Business Website header image

One Hour Website Makeover DJ Sean Denard Part 8 – Adjust Header Background Image Location

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.

This is Part 8 of the One hour website makeover for DJ Sean Denard’s site and in this session we show how to adjust the header background image location using the BYOB Thesis Header Widgets.

Video Transcript

Okay so now, we go back down to header row 3 settings and our header row 3 background style. We’re going to configure that background style, hit save and now we’re going to add an image to that. Header row 3 background style. And that header image is going to be… let’s see, okay yeah, I need to open up another… what was that? That would be the… oh forget it. We’re just going to do it all over again. So the background image starts here with the URL of the site and then we’d get the path inside the site. Yeah, a couple of… put a slash in there. Now we add the final slash and then we put the filename in. And that one is the header bottom, I believe that is the header bottom jpeg. And we’re just going to copy that name and come back all the way over here and paste it there.

Now we don’t want to repeat it and for the moment, we’re going to center it and move it to the top. But we may need to adjust its horizontal and vertical positions using numbers and not using this. But we’ll see what happens here. So go ahead and hit save, refresh it.

Okay so actually, it’s not lined up too badly. I need to drop it down a bit and maybe over a little bit. So actually, let’s see, that was 162 10. This may need to be taller really so let’s do that first. Let’s make our row here a little bit taller. Let’s make it 50 pixels tall and see if that solves my problem so more of the image shows up. No, I didn’t solve the problem. So then we’re going to move it down… move the image down so that’s back to the header row background style and we’re going to leave center… well actually, we’re going to say 0 in the horizontal position and in the vertical position, we’re going to say 10 which should move it down 10 and leave that in the 0 position and see what happens with the position of the image.

Okay so we want to move it up a little bit. I have this sneaking suspicion that my image doesn’t actually work through this. Obviously, I have inadvertently used 2 different versions of this image and… because it looks to me like both these circles are cut on the different spot. So since that’s the case, what we’re going to do is we’re going to get rid of this row background style, copy that but we’re not going to customize that background. Instead, we’re going to put this behind everything in the header background. So this is going to actually be behind all of these widget areas and we’ll go ahead and put that image. And again… but actually, the image that we’re going to use is not that one. It’s going to be the no flash image. I think we used that one. Actually you know what? I think actually the header background will work. Let’s try that one and see. Hit save… actually, I may need to apply a background here yet. I’ll have to look at that real quickly. Refresh this. Yeah, I need to go apply a background color to that. And then… but you can see the circle up here and so all I need to do is move it down and move it over in order to make it work. Let’s pick that blue color though from this. That’s what color there.

Okay and so our heading… header background color image, instead of fff, it’s going to be that. And we’ve got that but we are going to move it down… let’s move it down 30 pixels and see what happens. So we’ll leave it in the 0 position but move it down 30 pixels and see what the net result is. Okay so we’ll move it down 40 pixels and we’ll move it over 15. So here’s where we go back to our trial and error stuff. So we’re going to move it over 15 pixels and see positive numbers moves the image towards the right and then down another… what did I say, 10? So 40 pixels, positive numbers move the image toward the bottom. Hit save, hit refresh.

Okay well let’s see, I think we need to move it more than 15. Let’s move it 30 so 30. And it looks like it might need another… call it 45, let’s see what happens. We’ll probably be you know, 37 and 42 but make the big changes first. Okay so actually, not bad. I’m guessing that’s about 4 o 5 pixels. So coming back down to this… nope, row background style, wrong one. Row background style, I moved it over 30 so if we move it over 27, maybe the 45 the way it is for the moment. If you can tell, I’m obviously still using the wrong 2. Yeah okay, you know… and this isn’t going to be perfect because I am clearly using the wrong circle here. But we’re going to move it up just a little bit and move it over again a little bit and see if that works.

So I’m moving it up to 43 and 26. Let’s see if that works. Now we’re fine fine tuning it. Okay, over one more, I guess. Maybe 25 was right all along there, 25. And then I guess pull it up just a little. 41… let’s pull it up 2 pixels, see what happens. Well, not bad. You know, it’s not going to be perfect because obviously, the difference between the colors is that this image wasn’t cut from the same thing this image was cut from. And so there could be distortion that makes that… prevents that from working perfectly but the concept that you see is live and well.

And so now we have… let’s actually, we’ve run out of time. So we’re going to have to come back next time and put in the menu and then we’ll put in our widget and then we’ll style the footer and we’ll be done with it. But I mean, you can see this is a pretty complicated little process but you didn’t end up having to write any code. All you have to do is you know, make some settings and it will write the code for you. And obviously you know, you could have decided to do this entire thing as one great big image rather than having varying pieces of text, right? We wanted this stuff to be text because we want somebody on the phone to be able to click on this and this is going to be a link that links off to check my availability. And so we didn’t want… so the consequence of that is that it’s important to us that this all be text. Plus, this is flash in the real live site you know, doing this thing there.

So anyway, next time we’ll come back and keep on working on that. Everybody have a lovely day. Tonight, we’ll be talking about the site with Sean. He hasn’t seen any of this so don’t tell him about it. And we will talk about you know, how we see it, meeting his needs and how it reflects what we talked about last week. And then when we’re finished presenting this to Sean then we’ll be talking to Gerard or I’m sorry, not Gerard… Jared about his organic gardening site.

So everybody have a lovely day and I look forward to chatting with you all again soon.

0 Comments… add one
0 comments… add one

Leave a Comment