Build Your Own Business Website header image

Styling the Agility Skin for Thesis 2 – Part 7 – Set a Single Full Width Background Image in Agility

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.

You have seen many ways now to use repeating background images in the Agility Skin for Thesis 2 and now I want to take a look at setting a single full width background image.

Add Image to the Main Body Background

For example, maybe you’ve got a paper texture background like the one I have here. In this case, that paper texture background is already in my media library. I’ll just come over and grab that, paper-background.

Let’s copy that, come back over to skin design and again, this is going to go in the main body background. I’m going to say no repeat and otherwise, I’m not going to make any other changes to the defaults. We’ll save design options and refresh this.

Image Doesn’t Show Everywhere

Something that you notice is that, obviously, you can’t see this background image behind the image in the header or behind the menu or behind the image in the footer. In fact, since I’m not repeating the image, all I see is this much of the image here, I don’t see the whole image because I’m not repeating it.

Now, this is not a tileable image but I could say repeat-y but you’re going to see the seam. When you do that it’s repeating and actually, this seems pretty hard to see but just right through there is a seam of that paper background. That seam is so subtle it might not matter.

Why You Should Set a Background Image Position

Now, because I didn’t set a background position, note what happens. When I move this, everything appears to move across the paper, it appears to move with the paper. The paper stays in fixed place and this content moves over across the top of it which is generally not the effect that you want.

So what you can do here is set the background position. I’ll set it to be center top because, in this case, when you move the window the image itself stays in perfect alignment with the page. So when you move the window what happens is the image gets cut off equally on both sides and so the website itself does not appear to move over the top of the image.

What Happens When You Set Background Image Attachment

This might be the right way to do it, to just tile the background image but something else you could choose to do if the image didn’t tile is to set the background image’s attachment.

So instead of repeating we’ll say no repeat and instead of background attachment we’re going to say fixed. Set it to fixed, save our design options and refresh our page. Now the background image doesn’t move and the rest of the content moves over the top of it. So we don’t need to repeat the background image, the background image itself just stays in a fixed position while the rest of the site scrolls over the top of it.

0 Comments… add one
0 comments… add one

Leave a Comment