Would you like to know how to change the background image or color on your WordPress website? Here’s a quick video to give you step-by-step instruction on how to change those options.
Video Transcript
Hi, y’all! Welcome to another WordPress Wednesday. I’m Kori Ashton here in San Antonio, getting ready to walk you through basically how to do anything with CSS regarding your background, whether it’s the whole background on your entire website or perhaps a section on your website and you want to affect either the background color or perhaps even add an image behind the scenes—or not behind the scenes completely—but behind your content. How do you select a background image? How do you change a background color? That’s what we are going to get into today.
So, here we go. Let’s slide me kind of out of the way here. Actually, I am going to move me off screen for a second because what I want you to pay attention to is the fact that there’s a little bit of an off-color here. See my white background that I’ve got here? We’ve got a little bit of an off-white color happening back here. What if inside this theme I wanted to put an image that kind of peeked out, you know, peeked out in that area? How would I do that?
Some theme authors are amazingly kind, and they will give you an area in your dashboard under your “appearance” area that possibly affects the background. Or perhaps inside their theme options, you might be able to go in there and manipulate how you affect the background of your entire website. This particular author did allow me to do that. So, what you want to do is go in and upload a background image to your media library so that it is here and available for you to use. Then, of course, this is different theme to theme to theme, different authors will have this in different areas, but a kind author will allow you to add a background image.
So, you would select an image from your media library since you have already uploaded that. This is my image here; I select “choose image.” Wonderfully you can already see it pop in back there. If I scroll down, this particular author, again, allowed me to have some wonderful settings in here. I do not want to repeat this image because it’s really big. You might, if you have a small, tiny, little image that is a pattern, you might be able to set it to tile and it would tile all the way across your website really beautifully. If you want the image to be left, center, or right, you can always play around with these settings and see kind of how things sit on the page. Do you want it to scroll with the page or do you want it to be fixed? I am going to choose “fixed” and then I am going to go ahead and click “save and publish” so that when I come back to the front side of my website and click refresh, you’ll see now that that image sits back here and that this grey area is gone. As I scroll my page, the image sits fixed on the page or the back of the page. How nice is that?
That’s pretty great, but what if your author does not allow you accessibility like that? How do you do that without this really great author’s kindness? I am going to show you how to do it via CSS! So, as you know if you have been watching any of my videos, every single theme has the editor area. So, “appearance,” “editor,” and you get to see the CSS box here—the file, rather, that your author has coded—to affect everything on your website, right? However, I’ve always shared with you don’t make any changes inside of here because any time you go to update your theme, you will lose all of these wonderful changes that you’ve applied to your website. So, the workaround for that is to either use a custom CSS plugin or, if your author was kind, they may have given you something that looks like this, which is a custom CSS box inside of your theme. So, more than likely it is empty, unless you have already been adding code. These are the codes that I have added so that any time I click update on my theme, these are the things that still affect my site and my customization changes are intact.
Well, I want to be able to change—let me refresh this because I already removed that image—I want to be able to change the background color. As many of your know, I work on Firefox; that’s my browser choice, and I use Firebug to do selecting elements. So, that is what I just did. I engaged Firebug, and I am going to click on the selector element here and go to the back of my page back here and try to figure out what portion of this website has that grey color on it. Very typically it is the “body” tag. (I am going to slide this over a little bit. I want you to be able to see the background still.) Look over on this right side here. This is the CSS that is affecting the area that I am working on right now. You see right away that says “background-color” and it gives me this “F2F2F2F2” which is, in fact, that little color that we have back there. We can play around with this just by simply clicking the “on” or “off” or the “delete” icon right there just to see if, indeed, that is the correct spot. Brilliant! It is!
So, if I wanted to change that color to some random color or whatever color we wanted it to be—let’s say that we want to change it to some crazy looking red—I could play in this area and be sure that I am affecting the right spot. Once I figure out the exact CSS element I want to manipulate—I know that I’m going for the body here, right?—so, I can go into my custom style sheet and overwrite anything I want to affect this CSS.
I am going to slide down here; and I am just going to type in “body,” open curly bracket and close curly bracket. We are going to use that same element tag here “background-color:” and we’re going to add in the hashtag (#) with the whatever, you know, color code you want there. Of course, you have to close it there with a semicolor. We’re going to click “save options.” Now when we go to the front side of your website, you should have a red background. Whoa, that’s bright and painful, isn’t it? Bright and painful!
Another really cool tool that I use inside of Firefox is the colorzilla eyedropper so that I can go onto my screen and select absolutely any color that is on my screen. So, I am going to actually grab this really cool kind of mustardy color here to see if I can go plug that in and maybe not have such a bright red craziness going on. Let’s drop in that color code right there. I just simply used that tool to grab the color code to make that mustardy color appear behind the scenes in a background color. Check that out. How fun is that!
The great thing about the background-color option inside of your CSS is you can affect any area on your website. It doesn’t just have to be the background of your website. It could be the background color of your sidebar. It could be the background color of your header or your footer area. Maybe you want to change it from this dark grey to a lighter grey. You can just use the selector tool to figure out how the author coded that whole section. It is the footer area, and if you notice here—if I slide this over—see footer background. Look at this dark color here, right? That is how they are manipulating that color. I can back that out and drop in the mustardy color. Look at that! I have completely changed that footer area now and have overwritten what the original author had coded.
If the author is not kind to you in allowing you to have a kind of WYSIWYG environment where you go in there and select easily the colors for all these sections, there is a way to overwrite it using a CSS custom box or a child theme with a custom CSS file. So, yay! Very cool and fun times there!
So, I am going to go ahead and take this color because that is not how I want to leave my website, but in doing that, why don’t I just show you really quickly—what if I wanted to use an image like we did originally and, again, your author does not allow you to code it just by choosing, you know, from a WYSIWYG chose-your-image-type environment? What if I just wanted to use this as a background image? Now I am going to drop in the file of where that sits on my server, right? That same image. So, I am just going to say URL, and that means link, right? I am just going to write a little bit of code here for a second: .com/wp-content/uploads/2015/02/Code_Poetry_2560—I do not have this memorized FYI. I am actually seeing this off screen for a second. But, you want to put end quote as a single quote, remember that, and a regular parenthesis, alright? So that should give me now—and what you can to do get that big, long URL is if you have it inside of your media library—let’s open another tab really quickly. If you’ve got that image inside of your media library, you just click on it and you can go get that long URL right there, grab that, and go back to your theme options and drop in that long URL, alright? We’ll click save options.
Now if we go back to the front side of our website and click refresh, that mustard color should be gone now. Hopefully, if I coded that correctly, you are going to have a background image back there. Ah, brilliant! There it is. There’s our background image. Sadly, though, it is going to repeat and we don’t want it to do that. There is a little bit of extra code that you would have to drop in in order to get that same effect that the author allowed us to do easily initially. (I am going to close that tab.) You would want to add a few more lines that look something like this. I am going to copy and paste these in for you to see really quickly. I am just going to put that in the same element, again, affecting the body area of the website. I’ve got a background image. There’s the link of where that image sits on my server. I am going to tell it background repeat—no repeat. Background attachment—I want it to be fixed or stay still as people scroll. And, I want the background position to be centered on the page, right? So, I am going to save that option, come back here to the front side of my website, and then go ahead and click refresh so that I can see the most recent view. Now hopefully it’s not going to repeat. It should be centered beautifully now and not tiled, of course, and it should hold perfectly still as I scroll down the page. Which it does! How cool is that? Fun, fun, fun!
Alright, Y’all, if you have any questions about CSS stuff, I have one more video left in the series next week. We are going to go deep into some serious nerdy stuff when it comes to CSS. Please be sure to tweet me if you have any questions @KoriAshton. I will put the information below in the description box. If you are local, check out our local meet-up group. We have all sorts of free resources there. I will put that link down below. I hope to see y’all at the next WordPress Wednesday. Bye, bye, Y’all!
