Welcome back to Part 2 of Lesson 4 of the Customize Thesis Like a Pro tutorial series. In the 2nd part of this lesson, we are going to look in detail at the various properties associated with the background image.
Default Behavior of the Background Image Property
Right here the background image has performed its default behavior which is that it repeats itself both left and right or in both the x and y direction and it does so, as much as necessary, in order to fill the space. It’s the default behavior of the background image property. Before we talk about other behaviors associated with that, this seems like a good place to talk about the difference between a background and a regular image.
Difference between Background Images and Regular Images
A regular image is something that is inserted using HTML and it affects the space that it’s in. That is, the space will enlarge or get smaller depending upon the size of this image. If we refresh this a couple of times, we can see that in operation here even in this box, you can see now the image got smaller so the space got smaller in order to fit that. And then when it gets larger, the space gets larger. Well, that’s not the way it is with the background image. A background image will fill the space that’s available but if the space that’s available is smaller than the image, then it cuts the image off because it has no impact on the height or width of the element that it’s a background of, whereas, our standard image does affect the height and the width of the element that it’s in.
Background Image Repeat Property
Out of the properties available, we’ll begin with the background repeat property. Go back over here to W3 schools and find the property called background repeat. Your choices for this are repeat x, repeat y, and no repeat. As you’ve already seen the default is for x and y. X is in the horizontal direction and y is in the vertical direction.
We’ll open up Web Developer and take a look at how that applies here. When I opened up Web Developer, the background image went away and that’s because Web Developer doesn’t deal with relative URLs well. So I’m going to change that relative URL to the absolute URL for a moment in Web Developer. I’m going to copy that – wp-content/themes/thesis_18/custom/images. There we go, we’re back on track again and let’s just make this a little bit easier to work with. And if we added background repeat: repeat x, you can see that the image now only repeats itself in the x direction. It starts in the upper left hand corner. Notice how that doesn’t change in the upper left hand corner when this moves but the upper right hand corner does change. It starts in the upper left hand corner and then just goes to the right in the x direction. That’s the way that this works.
If instead of doing that, I said repeat y then it would not be going left to right, it would be going top to bottom. And if we can widen this far enough so that it’s no longer repeating to the right but it’s still going all the way from top to bottom on the side here, again, starting in this upper left hand corner.
So various uses for this repeat x and y thing can be found over here. For example, this gray stripe at the top of this is created by a background image. And this widget image is actually just about 10 pixels tall and that wide and then it’s repeated in the x direction as much as necessary. You can also use it to create left and right bands and things like that.
And then of course, there’s the no repeat which means that the background image only shows up the one time. Examples of using that no repeat function – one good one is this underline under these list items. That underline is set to no repeat. Actually, so is this little read more button. This is an image that’s set to that. So there are a variety of potential uses for a background image that doesn’t repeat to fill up the available space.
Background Image Position Property
Next of the background properties available is the position property. The background position property specifies where this background image repetition starts. There are 2 ways to specify the background position. First is the actual position and the second is a relative position. You specify values for both the x direction and the y direction and your choices are right, left, top, bottom, center, and center.
In this example here, we have no repeat. We could say background position top and center and you can’t really see it here because it’s hidden but that background image is now sitting right back here. Actually, if we said .custom #page background color transparent, you can see through this…the background color for the page is white and so that covers it up. But you can see with this background position top and center, it goes right to the center.
If we said center center then we come down here to the center of the rendered page in both directions. If we said background repeat and let’s say repeat x and center center, you can see that it is in the middle of the page here at the center. And we could say center bottom and it would start down here at the bottom and go all the way across the bottom. Now, notice that when center bottom is used, as we change this left hand side changes. That’s because the image is positioned starting at the center of the page. So when the window expands, it expands in both directions rather than expanding from the left toward the right. If instead we picked left and bottom, then it would behave like the default where it stays to the left and it only expands to the right. Okay so that’s that background position property in that context.
Background Image Property: Relative Position
Another choice in the background properties you have is to use a relative position and relative positions are described in the x and y direction. That is the x position and the y position and positive numbers are toward the center and negative numbers are away from the center. Acceptable units of measurements are pixels, points, ems, and percents.
For example, we could use 50% and 50%. That’s the same thing as saying center center, right? It’s 50% of the way down and 50% of the way across and then we’re repeating in the x direction. If we said no repeat 50-50 would put it there, halfway down and halfway in. Now, if we used pixels instead, 50 pixels from the left and 50% down, this is relative again to the left hand side of the browser window. So as I open the browser window, it moves in relationship to the actual page. If I made it -50 pixels, then you’re never going to see that edge because that edge is 50 pixels outside of the browser window itself.
More often than not, you use this kind of a setting for fine tuning the position of a background image that you want to exist exactly where you want it to exist. For example, this is something that I use on the image sprite that is on my blog for Contact Us. These things right here are image sprites or this is an image sprite and each one of these things is using that x and y positioning in order for the element to behave the way I want it to behave.
What we really want to do here is to go back to its normal behavior. Here, we’ll get our page color back and I’m going to go ahead and copy this and modify the CSS file to reflect that.
Okay and that wraps up Part 2 of Lesson 4 of the Customize Thesis Like a Pro tutorial series.