Build Your Own Business Website header image

How to Add Tiled Background Images to Full Width Framework

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.

 Part 1

This is part 1 of the series How to Add Tiled Background Images to a Full Width Framework. Here we show how to add the tiled background images using the BYOB Thesis Full Width Backgrounds plugin.

Video Transcript

The first thing I want to show you is this site, subtlepatterns.com. I’m going to put that in the chat window also so that all you guys can grab it. Subtlepatterns.com and this has a whole bunch of really cool, repeating background images. And so I’m going to use the plugin that I created, the background… BYOB Thesis Background… Full Width Backgrounds plugin and use… show you how to use some of these… one of these patterns as a background image.

And so, I’m just going to try and pick up a pattern that I think looks cool. You know, I love this pattern here. I have absolutely no use for it but all you have to do is download the thing and then let’s go over to this site. Let’s see, laurraine.byobtutorial.com.

Okay here we go. So, I might as well log in here. I’m going to add the Background Images plugin. Let’s see, Full Width Backgrounds Plugin. That’s what it is. Okay and then we go to Full Width Backgrounds and I think what we’re going to do is we’re going to actually customize everything just for grins. We’re going to start off with a background image. And this is Inflicted Pain so I’m going to open up FileZilla and you’re going to have to bear with me for just a minute because I don’t have…let’s see, I bet you can see how I created any of these so copy this site and then this is going to be laurraine.byobtutorial. And so my login is all the same here but my Advanced, the default local directory for this one is let’s see, byobwebsite, tutorial sites… where did Laurraine go? I think I must have run right past her. No, must be here. Here it is and then WordPress, okay. So that’s my default and then this one’s just going to be Laurraine. Use synchronize browsing, connect. Let’s see what happens. It should work just fine. Yep, okay. Content, themes, thesis_182, custom, and images.

Okay so, the image that we’re going to put in is this image. Oh well, okay let’s try that again. Drag and drop to there and inflicted.png got loaded in here and then download it back to my site. I’m in the local machine now so that’s in both places. And in terms of our body background image, we’ll grab the URL then, we’ll copy and then I’ll just grab the rest of it from here. So laurraine… no, not laurraine. We’re grabbing wp content, themes, thesis_182, custom, and images. And then we’re coming over. I’m going to put the filename in and the filename is inflicted.png. Save.

That image is sitting right here, right now, that little square image that creates this background. What we have to do is make it repeat in the X and the Y direction. So if we come back over here to our background image and we say repeat in the X and repeat in the Y and hit save and refresh it… sometimes, I forget that occasionally. Now, we’ve got that cool background image running through this whole thing. And actually, I’m not sure that this is the full width framework. Let me just double check that. Most of the things you can do with this can’t be done… yeah, it’s the page framework. I switched to the full width framework.

Okay so we’ll refresh this. I guess I better go back to the full width backgrounds and save that. Okay so we have to turn off the rest of this stuff. So for example, on the background image for header area background styles, if we make the background transparent, now that image will show up back there in the header area. And we do the same thing for the content area, make the background transparent and then the footer area, make the background transparent and save that. Now we should be back to the same condition where we were earlier.

Okay so now the… you can do that with you know, any of these images. So we could easily use this you know, use this Project Paper instead. In fact, let’s just play with that for a second. We come back over here to FileZilla and drag that over there and rename it and then make sure we download it back to our local machine. And then let’s just grab the name of it, come back over to the settings, and for our background image, we could just change the name. That’s all there is to it. Refresh it. And now we have that other background here instead.

0 Comments… add one
0 comments… add one

Leave a Comment