With that conversation about CSS Background Images and their properties out of the way, we’re going to start off by looking at tiling a background image. I want to start off here in this Thesis 2.1 site, thesis2demo, and I am working in the Social Triggers skin.
But first I should say that this class builds on the seminar that I taught last week on an Introduction to HTML and CSS for Thesis Users. This builds on that class so if you weren’t at that class then some of this is may look unusual or not entirely familiar to you.
I’m not going to repeat the information I taught there but that seminar is being posted today so you will be able to watch that seminar and that is really the beginning seminar of this class is that seminar, Introduction to HTML and CSS for WordPress and Thesis Users.
Add a Tiling Background Image
I’m going to come over to the dashboard here and come to the Skin Editor, go to Images and add an image. I’m going to add a tiling background image.
I want to show you what I mean by a tiling background image so let’s take a look at that. This is a transparent background image so all those little white grey checks represent the transparent area and these are these little paw footprints. When this image tiles, it connects up in such a way that you can’t see the seams. This is the background image we’re going to use to demonstrate this topic.
Working in Custom CSS
We’re going to put this background image in the background of the body of this. Let’s browse and then come over to that location, to darkGreenPaw. Add the image and then we’ll select the URL here. Next we go over to CSS, Custom CSS. All the work we’re going to be doing today is going to be down in Custom CSS because this is a course on how to write the CSS.
Syntax for Background Images
We’re going to put this in the body so we’ll say body and then background-image: and then the syntax is url and with opening and closing parenthesis and then opening and closing single quotes and then the URL which we just copied so images/darkGreenPaw.png like that.
This is called the relative URL which means it’s not giving the full address of its location, it’s giving the lcoation of this image relative to the CSS file when it shows up on the site. You can do that with background images as long as the background images are contained inside of the Thesis skin images library. If this image is contained inside of the Media Library then you need to use the full URL for it.
So we’re going to say background-image:url and let it go with that. Close out that bracket and let’s save our Custom CSS.
So we’ve written that code and when I reload, now you can see we’ve got all these little footprints here all over the body. All I said was background-image:url, I didn’t say anything else. So the default was that image starts up here in the upper left hand corner and then it repeated itself in both directions and because of the way the image is designed, you cannot identify a seam between those images. And that’s called a tiled background image.
Repeating One Direction Only
We don’t actually want to do it this way. What we’re really going to do is put a background image in that just goes horizontally across here. Then gives us continued background of our menu and of the title and then keeps this line going. So this background image looks like this here.
Let’s just look at the image size here. It’s 72 pixels wide, it does not need to be, it could be 20 pixels wide and 531 pixels tall and it’s got the dark green color up there and then that borderline and then it has the lighter color of the header area and then it has this light yellow green color of the title area and then a lighter green color for the feature box. That’s what this image looks like and that’s what we’re going to install next here.
Come on over to the add an image or browse and then we’re going to use social-top-background5, add that image so you can see this is what it looks like. We copy that URL, come back over here and now instead of this image I’m going to insert that image. I’m going to use the repeat property. So background-repeat: and I want it to repeat horizontally. The X-direction is horizontally and the Y-direction is vertically. So I’m going to say background-repeat and repeat-x; you can get repeat in the X-direction.
Review Background Properties – W3Schools
If you ever need to know what the syntax is, you can always come over here to w3schools. Go to that CSS background, scroll all the way down to the bottom and here’s all the background properties available. Just click on background-repeat and then it’ll show you all of the valid variables. So repeat which repeats in both directions, repeat-x, repeat-y, no-repeat which means it doesn’t repeat and then inherit which means it just takes the same characteristics as the container that it’s in.
In any case, we’ll save the Custom CSS and now the site’s going to look considerably different because now we’ve maintained the menu color all the way across. We continue to make that border appearance. Although obviously, I did something wrong with my repeat, notice how I misspelled repeat.
This is what happens when it repeats itself over and over again or in both directions. So, we’ve got the darker line up here with the menu then we’ve got those lines continuing and then we’ve got this background color for our feature area. And that’s essentially how you do it horizontally. We didn’t specify a position because the default position top left is just fine for us in this situation, all we had to do is specify a repeat.
Add Background Color and Image in the Footer
Now what we’re going to do is put a background color and a background image down here in the footer. First, I want to inspect the element here so I know exactly what I’m going to be doing a background for. You can see this div id=”footer” goes all the way across the page so I can go ahead and use div id=”footer” as the thing I’m going to style.
First, I’m going to give it a background color and I’m going to pick this background color. Something I demonstrated in the Introduction to HTML class is this tool called ColorZilla. I’ll select ColorZilla from my tool bar, click on the color that I want to use and then I can come back over here and say #footer for div id=”footer” and then background-color and paste my hexadecimal color.
Add Additional Color Using a Background Image
Let’s save Custom CSS, reload this and now I’ve got that color filling up this whole footer area. Now what I want to do is put a darker color here and since this is one big container, I don’t have another container to color with just a color. Instead what I’m going to do is use a background image to create that color and that background image looks like this, it’s 85 pixels tall and 20 pixels wide or so.
We’re going to use the position property to place it exactly where we want it to be. We’ll come back over here to our image library and browse to footer.png, add the image. We’ll copy that. We’ve got a background color, background-image:url, paste it, close out those and then we’re going to give it background position. We give the horizontal value first and the vertical value second.
The horizontal value, this can be in terms of percentages, it can actually be in terms of any unit of measurement that CSS can recognize. It can also be in words as well, so if we say left bottom here, it’s going to start in the lower left corner. If we say 0 and 100%, it’s also going to start in the lower left corner because 100% is 100% from the top which means the very bottom and 0 is the far left. If we did a 100% and a 100%, it would be the bottom right hand corner.
In this case, we’re just going to use words to make it clear. We’ll say left bottom and that’s our background position. Then our background-repeat and again, we’re going to repeat-x. Let’s save that Custom CSS and reload it. Now we’ve got the darker green at the top and the bottom and we’ve got the lighter green down here in the footer and it looks exactly the way you would expect it to look.