Now that we have introduced Agility’s built in Background Style Elements, we’ll work on using background styles with images.
Background Images Included with Agility
The first thing to say is that Agility does have some background images already included with it. You can see those background images if you come over to the skin editor and look under images. There are these different linen textures that you can choose.
Add Background Image to the Body of the Page
I’m going to choose Linen430. That’s the URL for that and then come back over to my backgrounds. First off, I’m just going to show you what it looks like if we add it to the main body background. Let’s take our background image and paste that URL there.
If you’re taking the URL from the image loader in the skin editor, it doesn’t have to be a full URL, it can be relative like this. You can do it that way or you can take the full URL out of the media library and I’ll show you both ways.
At the moment, we’re aren’t going to put anything in background image position. We’ll leave background image attachment at default. The default for background image repeat is just repeat. We’re going to leave it like that. Say okay, save it.
Now we’ve got this very subtle gray texture background that has repeated itself all the way across the entire site. And those areas that have background colors are sitting on top of it because we put it in the body.
Background Image Repeat Option
If we were to have chosen a different repeat choice, it would have had a different effect. For example, let’s choose no repeat just so that you can get a feel for that. Say no repeat and what’s going to happen now is that we’re going to have that background image up here in this top left corner.
That’s how big that image actually is. When you choose repeat that means it’s going to repeat all the way across left and right and up and down. But we could choose to repeat only in the horizontal direction, so repeat-x like that, and now it’s just going to go horizontally but not vertically.
Background Image Position
We can also choose its position. You can use a designation so you could say center and top there and then choose repeat-y. When we do that it’s going to go right here in the middle and give us a stripe right down in the middle because that’s the starting position. The starting position is center and top and then we repeat it vertically.
Center and Top Position
One of the reasons why you might use center and top as the image’s starting point is because if you’ve got an image that has a pattern that you don’t want to see move when the browser window moves. Center is the perfect way to do it because then the image will stay in place in the middle.
However, by default if you don’t specify an attachment position, it starts at the top left corner and goes to the right and goes down. But center top is a very common background image position especially for images that have a real specific appearance. I’m going to show you this in just a minute with a fixed image.
Tiling Background Images
This repeating action is particularly good for tileable images, for images that look like there’s no possible seam in them. They look like they’re big long images but in fact, they’re just small images that tile perfectly and one of the things you can do with that is what we just did here.
This is actually a tiling background image. It’s only 20 pixels wide and it just tiles all the way across horizontally. We’re going to do that here.
Add Background Image to the Header Area
Let’s get rid of the main body background and go to our header area background. We need an image and I’m going to check my media library because I think the one I want is there. It isn’t, so we’re just going to hit Add New and select file. It’s this here, top-background.
I’m going to hit edit. You can see it is 10 pixels wide and 202 pixels tall. I’m going to copy that, come back over to my background image. In this case, this specific position doesn’t matter but I’m going to repeat it only in the x-direction. We’ll say okay to that and hit save design options.
Now what I get is a background image that runs all the way across there. But I think I want a little bit more space on the top and bottom of this. Let’s go back over to my header area and I’m going to add 26 pixels of top and bottom padding and we’ll see what that looks like.
That looks good. So now I’ve got a little bit taller header. That background image is back in behind my header image so the little tiny image just repeats itself all the way across. It’s lighter at the top than it is at the bottom so it would look different if we actually did set a background position.
Let’s change it to left bottom so you can see that. What’s going to happen is, because there’s some darker part still down here that’s not showing, this becomes darker here because the image itself started down at the bottom. Interesting, it also had a little white line to it and that white line is showing up there.
Actually, I’m going to leave it like that. It looks fine but since the image itself is 200 pixels tall, if it starts at the top left then the bottom of the image gets cut off. If it starts at the bottom left then the top of the image gets cut off. So we just cut off the top of the image with that background image position.
Add a Background Image to Feature Box Area
Another good source of background images is a site called Subtle Patterns and I’m going to put that in the chat window for you so you can copy it if you like. You can choose all kinds of little patterns that you can add to the site.
Let’s take a look and find a decent pattern to add. I have used that Fresh snow in the past. Let’s add dimension. So all you have to do is download this and unzip it. Then you can come over to the skin editor. So this is the other way of getting this, come over to the skin editor, go to images, choose a file.
Then that’s in my downloads folder. I can either choose the little version or the big version, I’ll choose the little version at the moment and add that image. If we scroll down here you can see that image is 43 pixels by 50 pixels. Let’s copy that and add that in the feature box area.
Come back over here to skin design and down to backgrounds. Go to our feature box area background. Add our background image and I think we can just leave it alone entirely like that. Say okay, save our design options and refresh the page.
You can get a pretty substantial change in the character of your site with little background images like that or background patterns. If this background pattern were semi-transparent then the background color would show through it and this would be a nice little texture over the top of it.
Sometimes you can get semi-transparent patterns that you can place over the top of colors which makes for a very nice effect but in any case, we’re going to just get rid of all that. I just did that to demonstrate for you a source of tilable background images that you might use to add some design elements to your site.
Adding Images Using the Skin Editor vs the Media Library
Wendy asks, “Is there any advantage to adding images via the editor versus through the media library?”
The nice thing about adding them through the editor is that it makes it a little more easily portable if you’re going to copy your skin and use it some place else. In that case, the images go with the skin whereas if you use the media library the images stay at the website and you’d have to upload them again to the new site’s media library. So that’s the primary benefit of using the skin editor’s image uploader for images for this kind of thing.