Build Your Own Business Website header image

Create a WordPress Site from a PSD File Using Thesis – Part 3 – Add Background Images to the Site

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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.

Now that we have all the background images extracted, we can start mocking up the site. In this session we add the background images to the site using our BYOB Thesis Full Width Backgrounds Plugin.

Video Transcript

Unedited, okay. Well actually, with that in hand, I think we’ll go ahead and get started mocking the site up because we can have all the background stuff taken care of here with this. So we will… the site that I’m working on here is fullwidthbackgrounds.thesistoolbox.com. Nothing is actually set up on this site except I put my tagline and the right person the first time. What we’re going to do now is install the necessary BYOB Thesis Theme plugins and then we’ll add some backgrounds. And then, I think we’ll resume the rest of this creation the next time and we’ll start taking questions because we do have a whole bunch of questions. And we have some new questions since we started.

Okay so if we go back to our dashboard though, I think the first thing we’ll do is upload some images. And so we’re going to select our files, websites, Tailoring the Web, clients, Marina, Azymuth, graphics… and we’ll just pick each one of those images. Okay, we’ll save changes. And then the next thing we’re going to do is I think we’ll start installing plugins. And the first plugin we’re going to do is the Full Width Backgrounds plugin so we’re going to upload that. Choose the file… assuming that everybody knows where to find that plugin now. So I’m going to pull it off from my server rather than downloading it. If you don’t know where to find this, go look on the site. Full Width Backgrounds, install, activate the plugin.

Okay and with that, now let’s see. We’re going to also… actually, I think we’re just going to let that… let that be the only plugin that we install right now. So then we go to the Full Width Backgrounds plugin and we’re going to make some adjustments here. We are going to customize the body, the header area, the content area and the footer area. So we’re going to customize everything here.

And so for the body background, we’re going to pick up that body background image which is, as you probably recall, was this infinity symbol. So edit that, copy that URL, paste it and it’s not going to repeat. So we say that and it’s going to go in the top center, not the top left because we want the middle of the infinity symbol always to be in the browser window. So the top center and that we don’t have to make any other adjustments because we made that image exactly the same size as her page. So go ahead and hit save to that.

Now you won’t see anything because we haven’t made the other stuff transparent. Oh, isn’t that funny? So I have to get rid of a little bit of graphic here. But nevertheless, you can’t see any… well, I guess you can kind of see that because there is a little bit of transparency here. So evidently, I adjusted something here recently.

So anyway, in terms of the header area, we’re going to… let’s see, how tall was that header area image? Let’s go back to the library and look at our header background. And that image is 336 pixels tall. So our header height is 336 pixels tall. We’re not going to have any top border, bottom border, none of that kind of stuff. Background image… we’re going to make the background transparent but we’re going to place this image in there. It’s going to repeat horizontally. Maybe top left is fine. It doesn’t matter in that case. And then when we come down to customize header area .page, we want to make header area . page transparent as well.

And so now if we save that, I hit refresh. I didn’t configure this to use the Full Width Framework. Sometimes it’s the simple things that catch you. In terms of HTML framework, we have to use the Full Width Framework in order for the rest of that plugin to work. Silly.

Okay so now we’ve got our header line here and our header at the right height. Although we can no longer see our… oh because I can’t make that white. I need to be able to see through that. So you can see here I made an error with this. And in fact, what I’m really going to do is I’m going to open that little png I created. Because I made that thing white, it now covers the other graphic which is a mistake. We don’t want it to cover the other graphic so I couldn’t make that one white. Tailoring the Web, clients, Marina, Azymuth, graphics, header background png. Open it and what I’m going to do is cut off everything but the yellow. And then rather than having it sit on top of the header, I’m going to have it sit at the bottom of the header. Okay so File, Save As, header background png 2. We’ll call it header 2 and then come back over to our page. We’re going to come to the Media Library. We’re going to add a new image. Select the file. How did that happen? And background 2, open. Copy that, come back over to my Thesis Full Width Backgrounds plugin. We’ve got the height right but we don’t have the image right.

So now we’ve got the smaller image and instead of top left, we’re going to say bottom left and hit save. And now what happens is that image goes to the bottom of the header but you can see all the rest of the stuff up here is transparent.

Okay so the last thing we’re going to do is add this gradient to the background here and then next week, we’ll play with this some more. And so in terms of this gradient, we’re going to take our content area page. We’re going to grab our… we’re going to make the background of the content area transparent so we can see that image and the body. And we’re going to go back to the Media Library and pick up the content background. Paste that. We’re not repeating it in both directions. We’re only repeating it horizontally. It can be top left. It doesn’t matter. The content area page, we’re also going to make transparent. So now if we hit save, come back over here and refresh it. Okay, there we go.

So now we have a pretty faithfully… although I don’t see my… I don’t see that drop shadow here. And so I must have cut this off so the drop shadow doesn’t show up. I also obviously cut it off too soon up at the bottom because you shouldn’t be able to see this line. So we’re actually going to take a second crack at this because this is something that our client is going to expect us to get right. Graphic artists care about the details so we’re just going to come all the way down here. Enter and then we’re going to zoom in on this because I must not have my guide in the right spot. Oh, I did have my guide in the right spot so my guides didn’t work the way it hoped it would.

Okay so we’ll go ahead and go above that for a second. Cut it, zoom in on this and see how much extra space I’ve really got there. I’ve got 15 extra pixels above that so we’re going to trim this and remove those top 15 pixels. So back to canvass size and 822, it’s going to actually be 807 and 20. And we’re going to trim it so that the top part is removed so we say okay to that, proceed. Let’s get back up here to the top. I did get it this time, okay. So file, save for web and devices. It’s a png 24. We’re going to save it as content background 2 and hit save. See, this is a also a little bit of trial and error. Come back over to the Media Library, add new, content area background 2. Copy that, come back over to the content area background image, paste it, hit save, refresh it and now, we should have a piece of the drop shadow. There we go. That’s what it’s supposed to look like.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment