Build Your Own Business Website header image

How to Change the Background Image and Color in Genesis

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

In this session we show how to set the background image and color in Genesis. We customize display options by setting a background image, tile it horizontally and set a background color. The background color covers the entire background while the background image is just where we tell it to be. Genesis has its own background image and it will replace it with its own if the image is deleted.

Video Transcript

Rick: How do I change the header background image in Genesis and Thesis?

Member: Yeah. You did it the other night in the webinar and the full background… the page thing I could find but I could not find in… you know how you were changing the bright color?

Rick: Yeah.

Member: Image in the… yeah, I couldn’t remember how you did that.

Rick: It’s under header.

Member: Under header, okay.

Rick: So if we go to… it’s right here under Appearance and Header. That’s where you set the header image for Genesis.

Member: Alright, for Genesis. But then what about to the sides of the… that’s the header image itself. But you know, the background?

Rick: And then the background is the one below it is background.

Member: Oh really? Okay but… so background’s not the entire page then?

Rick: Well, background is the entire page. You could put a background image that was… that filled the entire page. So let’s choose… remember this great, big pastel one? Let’s just set that as background and if we come back over and look at it, that’s the entire page.

Member: Okay.

Rick: Now that’s not the way the image that I’m really using is working. It only covers a piece of the page but that’s by design or by intent.

Member: Oh because that’s the size of the image.

Rick: Right. And because I only want it to tile horizontally. I didn’t want it to tile vertically. So if we go back to this test 5 which is the one I’m using and it’s 39 pixels wide by 450 pixels tall. If I set it as the background and I tell it to tile horizontally but not vertically… I mean, I could always just say tile right? Save changes and then you have this funny thing going on where you get the stripes, right?

Member: Right. Kind of like with ice cream.

Rick: Yeah but we don’t really want the stripes. What we want is just to tile horizontally and with the tiling horizontally, we get that.

Member: Okay so you’re tiling that horizontally but how are you getting the… if you have the content there, further down in the page, where is that coming from? What is that?

Rick: This light color here?

Member: Yeah.

Rick: That is coming from the default style of this Genesis theme and I’m not doing anything to change that.

Member: Okay. Not the background and the content and sidebar area but to the right and left of that. That background is coming from a Genesis theme?

Rick: No, this background to the right and to the left… this is left… to the left and to the right, this stuff over here you mean?

Member: Lower. Right there.

Rick: Well, this is just color. So we have background image and background color that are set for the background. We have the background image that I said you know, starts in the center and goes across and then I have this background color which you know, which I selected. We could select, for example, pink or red. Save that change, refresh it and then you would have the background image over the top of the background color. And where the background image ends, the background color starts.

Member: Right.

Rick: So…

Member: The background color is actually on the entire page but the background image just gets weighed over the…

Rick: Yes, the background image is only where… the background color is everywhere and the background image is where we tell it to be.

Member: Now can you have no background image if you wanted?

Rick: Sure. You could just have background color. All you’d have to… well actually, in this case, no, you can’t. What you’d have to do is use a transparent background image because Genesis has its own background image. And so if you delete this background image then Genesis will replace it with its own.

Member: That black and less black thing?

Rick: Right. So if you want it to be just a color then you need to use a transparent background image.

Member: Okay. Got it. Alright, thank you.

4 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
4 comments… add one
  • sid June 3, 2013, 9:57 pm

    Wow, cool video. I’m a genesis user and successfully implemented this tutorial on my blog. Thanks a lot for this awesome guide. 😀

  • Toby Elwin August 31, 2013, 9:22 am

    I am trying to change my post background color to white and having a hard time. The reason I want this is that pasting pictures does not blend well with a grey background, example:

    Thank you for your help.

    • Rick Anderson September 3, 2013, 11:35 am

      Toby, note that the child theme you are using isn’t designed to have a “page” background color different from the main background color. You could always add #fff to the background of .inner – but you would also need padding and it will likely break the layout. If you want the page to be white I would just change the background color to white.