Now that you know what background images are and how they work in WordPress, the first thing that we’re going to do is add a tiling background image. And we’ll add that tiling background image to this Genesis Executive Pro Child Theme site here.
What is a Tiling Background Image?
A tiling background image is a background image that’s designed to be seamlessly repeating. These little footprints are an example of a tiling background image where each piece perfectly connects on all 4 sides so that when it repeats horizontally and vertically, you can’t tell where the seams are. And that’s going to be our default starting spot.
I’m going to upload that image to my Media Library here. We’re going to come over here to Add New, select the file and then Documents, My Business Website, Images and that is darkGreenPaw. So if we load that image here, it’s showing you its little thumbnail. Click on the edit button and I can grab the URL so the URL of this image now is right here. This image is 177×177 pixels but as you’ll see will fill the entire space of the site with that background image.
ID the Element to Attach the Background Image
Let’s take a look at the site. Now, if we want to fill this whole site with this, we have to decide which element we’re going to add the background image to. Let’s inspect our element. If you aren’t familiar with what we’re doing here with this inspect element, we covered this in part 2, Tools of the Trade from our Introduction to HTML for WordPress and Genesis 2 Users seminar.
So, we’re using the Firefox Page Inspector tool to identify the HTML element that we wish to style. In HTML, all of the visible contents of a web page are contained inside the body and so the body is a good choice for us here. And that’s what we’re going to do, we’re going to assign a background image to the body of this. In this case, it’s very simple.
Create the CSS Rule
All we have to do is come over to our Child Theme Editor and type the HTML element which in this case is body and then an opening bracket. Notice how the editor adds the closing bracket for you. I’m going to press Enter and it automatically indents everything now. Then we’re going to type the syntax, background-image:url, opening parenthesis, opening single quotes. Notice how again the plugin automatically added the closing ones for you. Then just place the URL there inside those quotes, come to the end and put the closing semicolon in.
This is the simplest possible rule. We’ve got the HTML element that we want to style, we’ve got the property being background-image and we have the value of that property which is the URL of the image. Let’s save our Custom CSS here and come back over and refresh our page. Here we have that little footprint having repeated itself all over the place, all across the body. So that is your traditional tiling background image and that’s tiling it both ways.
Add a Background Image that will Span the Entire Width of the Page
I really showed that to you so that you could see what a tiling background image is and how it behaves. But what we’re really going to do here is instead of that, use a horizontal background image that’s going to span this entire width here. And that will match our background color of the slider and we’ll give us a nice band across here.
So we’re going to come back over and go to our Media Library. I have a background image here, it’s is 48 pixels wide and 557 pixels tall. It’s got the light grey top and then it has this black or darker grey bottom.
We’re going to copy it, come back over and replace the URL with that one and then add the background repeat property. So background-repeat: and in this case, we want to repeat in the X direction. So we’ll type repeat-x, okay? Now we’ve got background-image and background-repeat. Let’s save our Custom CSS, come back over here and refresh it.
Use the Position Property to Adjust the Location
Now we’ve got that grey color up here and this black color coming along here but note how we are off about a pixel. There’s about a pixel off here and a pixel off up here and this is where we’re going to use position to move the image down a little bit so that it aligns up perfectly.
Let’s come back over to our body again and say, background-position. There are a variety of ways in which you can specify position. You can use any kind of number that HTML will recognize, meaning that you can use pixels or percentages or inches or picas. You can also use words like top and center or bottom and left.
Create the Rule
The way in which you do this is the first value that you put in the background position is the horizontal value and the second value is the vertical value. Our horizontal position is fine as it is so we’ll just say 0 for that but our vertical position, we want to come down one pixel so we add 1px and then semicolon.
What we’ve said is horizontally, don’t do anything, that’s what the 0 represents and vertically, come down 1 pixel. Now, if we wanted it to go up a pixel what we would do is put a minus sign here instead of a positive. Positive is down, minus is up.
Remove Extra White Line
Let’s save our Custom CSS, refresh it and now we have it lining up perfectly. The only other thing I want to do is just get rid of this white line here. I’m going to give you an example of how to find where that white line comes from. Begin by inspecting the element again.
We’ll look at site-container first because you can see how it’s highlighted here, site-container is the first big wrapper. I don’t see anything here that looks like a line or a border or something like that in site-container.
So I’ll expand site-container and look at header. Now header is all the way up at the top so we know that’s not it. So then we’ll take a look at site-inner and again, site-inner goes from here to here and that and then all the way down to the bottom here. If we look at site-inner, we’ve selected here, come over on to the right and you can see there is a box shadow that is creating the line.
So it’s site-inner box-shadow and if we uncheck that right, take the checkbox out you can see that thing goes away. What we’re going to do is take site-inner and then box-shadow and say 0, 0, 0 and 0 to get rid of the box-shadow entirely.
We’ll copy that element, come back over to this, paste our element. It’s .site-inner or class site-inner, opening bracket, hit enter. We’ll say box-shadow:0 0 0 0; and I’m not absolutely certain that that’s going to work but I think it will. Save Custom CSS, come back over here and refresh it. And lo and behold now, we have a color, we have a background that matches the color of this part so that it looks like it’s just a continuing piece of it and it continues to slide like that.
Change the Color of the Tiling Background Image
We’re going to continue this whole tiling background image but we’re going to change the colors instead. I have a different background image here for that and that background image is this one here and it’s 48 x 558. If you’re paying attention it has slightly different dimensions from the earlier one.
Let’s come over here and change our background image to that, save our Custom CSS and refresh it. Now we’ve got this blue color and it’s down a pixel already. I deliberately made the black one the wrong size so that you would see how positioning works but the blue one is the right size so we’re going to take out the background position here for that one.
The other thing we’re going to do is change the color of this so that it has a background color that matches this. The first thing we’re going to do is identify the selector here. Click on that and we’ve got our slide-excerpt. I right clicked right here and inspected the element. It brought up the slide and then inside that is the slide-excerpt . The slide-image is the full thing so the slide-excerpt sounds like it’s what we want.
Let’s look over here to the right hand side, it’s got this background color specified. Let’s look at what color was specified, it’s specifying this background color of #222. So what we’ll do then is copy that selector, come back over to our thing there and type the same selector in. Say background-color and then to get that background color, we’re going to use this tool that we installed on Firefox, ColorZilla.
Then we’ll click on ColorZilla, come down here and hover my mouse over this background color. Notice it says it was copied to the clipboard up there. So I can come back over here to my Custom CSS and paste that and put a semicolon in, save my Custom CSS. Reload it and now we’ve changed the background color of the slider and we also have this nice blue color that matches the blue and our logo and that spans the whole distance here.