Build Your Own Business Website header image

Add a Background Image to the Header Area Using the BYOB Thesis Full Width Backgrounds Plugin

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.

In this session, we demonstrate how to install our BYOB Thesis Full Width Backgrounds Plugin and then discuss its many features. With this plugin you can currently customize the background areas of body, header, content and footer in a full width framework Thesis site.

Video Transcript

Okay I want to just quickly demonstrate my cool plugin that is the Full Width Backgrounds Plugin. I’m going to use the Full Width Backgrounds Plugin to take this and turn it into this. Now, this plugin really only works in… or most of the function of this plugin is only applicable to the full width framework, not necessarily all of it but most of it is and so that’s what we’re going to take a look at here.

I’m just going to start off by installing the plugin and so Add New, upload, choose my file, Full Width Backgrounds, install it, activate it. Now I do have multiple of my plugins on this site already so it’s down here under the BYOB Thesis plugins, Full Width Backgrounds.

And then it starts off with select the background areas you want to customize. You can currently customize the body, the header are, the content area, and the footer area. And what we’re going to do is we are going to start off by… well actually, what I’m going to do first is I’m going to sort of the… no, I’m going to start off by doing the header area. And you hit save and now we have all the choices for the header area. And so, in terms of… actually, yeah.

And so the next thing we can do is set the height of the header area and we could put it in a background gradient which I think, is totally cool and I’ll show you. But what we’re going to do is we’re going to insert a background image. And so, we’ll start off with that and we’ll go to Add New and then select the background image and then tutorial sites, let’s see, Thesis eMember, graphics, and I think it’s background2 bye 296. Okay, let’s try that one. Let’s see, let’s edit that image first. Maybe, that might not be… oh yeah. No, this is it right here. Yeah, this is the image.

Okay so we’re not going to edit it. We’re just going to copy it now, save all changes, come back over to the plugin, paste the URL to the plugin, and then we’re going to come down and talk about how we want it to repeat. We want it to repeat in the x direction which is horizontally so we’ll go ahead and say yes to that. And if we don’t specify anything here in terms of where we want it to start, it will start in the upper left hand corner. That’s fine for this kind of an image. So we’ll go ahead and leave those blank for the moment and let’s just go ahead and hit save. Oh, I forgot to give it a height though. In the absence of a height… let’s see, in the absence of a height, let’s see what it looks like. Yeah, let’s refresh it. In the absence of a height, we don’t get the full effect of it.

And so, we need to specify its height as being 296 pixels tall and we also need to make this… a part of this page transparent. And so, that’s what we’re going to do next. We’ll come back over here and we’ll give it a height of 296 pixels. And then we’ll come down here and we’re going to customize the header area .page and we’re going to make the background transparent. If we hit save now, our header area should be… okay there we go. So now, we’ve got the color that stretches all the way through and at the right height. Now, what we have to do is of course, swap out this from our header image.

So if we come back over here to Thesis header images or Thesis header image and we’re going to choose a header image file and again, that’s going to go to websites, byobwebsite, tutorial sites, thesis emember, graphics. And then yeah, I think this must be this right there. Let’s upload it and we’ll see. Yeah, there it is.

So now, if we refresh our site, now you can see it looks exactly like this site does and the way we accomplish that was essentially, putting… defining the height of header area and then placing a background image in header area and then putting our Thesis header image in so that that it pushed the menu down and got rid of the text that used to be here. Now that’s how you do the top part. You can also do this… well actually, let’s try something kind of cool.

Something else that you can do is let’s see, okay let’s go back down to the full width backgrounds and let’s add a drop shadow to the bottom of that image. And so, the bottom drop shadow, let’s add a 3 pixel drop shadow to that. We hit save and yeah, we’ll just close this one now. Wait for it to write the CSS here or whatever it’s doing.

While we’re waiting for it, Thesis or Jared asks, “What is thesisemember.com?” Actually, you’re missing the e out of that URL. It’s not Thesis member. It’s thesisemember.com. And thesisemember.com is the site that we’ve been building in that membership site class.

And let’s see, Jared also asks, “Is the full width background plugin for the header or for the whole site?” It’s actually not for the header. It’s for the areas in a page and if you don’t know what I’m talking about, you should go back and watch some of the videos about full width, the full width framework so that you understand what those elements are. But Thesis has the page width framework and the full width framework. And the full width framework has these various areas.

You see, now you’ve got this little background. You’ve got this little drop shadow that we added which is kind of cool, simply by selecting the drop shadow which I’m totally enamored with. But one other thing that I’m totally enamored with is the background gradients. And this isn’t going to look great in this case but you can imagine what it would look like if it did look great. If we go to ColorZilla, www.colorzilla… Gradient editor, I’ve shown this site in a couple of other instances. But what this does is this allows you to create your own gradients and you can create those gradients by you know, picking colors and then by moving these things around in a very similar fashion to Photoshop.

And so what we’re going to do here… by the time you finish dragging this stuff around, you end up with this code down here. And if you copy that code and come back to my plugin and go to background gradient and paste that code here, just in case you’re wondering, the address to this location is here. So you can just cut and paste the address and the URL for this little note to get to this. But if you do that and hit save, the gradient takes a precedence over the background image. So now, this background image will go away and what we’ll have is that gradient that I created. And so, there’s the totally cool gradient with you know, and we can obviously have an image in here that worked better.

Jared, you don’t become a member of Thesis eMember. Thesis eMember is a demonstration site to demonstrate how to create a membership class. You could certainly, I mean, I’m finished setting that site up. People can pay to join it but it’s not… it won’t be useful to you because you already have a membership at my site. So it’s… Thesis eMember is a site that I created in the course of teaching this How to Create a Membership Website. If you follow along with this course, we’d start with a blank site and we work our way all the way through. Next week, we’ll have the very last lesson which you’ll work your way all the way through everything I know about how to create a membership site, ending up in Thesis eMember.

And so anyway, you can use a gradient to do that and then you can do the same thing in the footer. So now, let’s just reverse the code for the footer and copy it. Come back over to this and now, in terms of select the background areas to customize, now we’ll select the footer area too and hit save. And in the footer, let’s go ahead and make the footer say… that’s header area. Now we go down to the footer and let’s make the footer 200 pixels tall and let’s add a drop shadow to the top of the footer and let’s make it 6 pixels. And then we paste that gradient code in here and we hit save again, come back over and refresh it. And then you’ve got our header gradient, come on down you’ve got your footer gradient. We can make that… I forgot to make that footer area .page transparent. Refresh that.

And so now, you’ve got a header color and a footer color and if you want to add… if you use my Footer Widgets plugin, your footer widgets would sit down here in this footer area. And so now, you can put widgets you know, with this kind of a background image or background color here. The nice thing about the CSS3 gradient is it does not require downloading an image so it has one less http request. And so it’s very fast to load and it looks totally cool.

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