Add Background Image to CONTENT AREA

[PhilMurray]

There is one element I was wondering about -- in one of my client sites http://www.thejewelboxonline.com that I am currently developing -- I want a background image to be included [that fills 100% width of the viewable screen] where the CONTENT starts - ie: below where the slider stops on the home page and below the top nav on any inner page.

There doesn't seem to be a full width DIV in the code at this point so can I insert a call to a CSS style [a DIV] using the GENESIS SIMPLE HOOKS and the box for genesis_before_content_sidebar_wrap  ?

Am I able to add a 100% width DIV in there that will allow me to place a background image in there that will run from that point down to the footer?

How do I add that code there in the genesis_before_content_sidebar_wrap box?

Or is there some other way to do it?

Thanks

Phil

[billerickson]

Here's how I'd do it:

1. Move the .page-title box outside of #inner, to just below the header. I don't have your theme code so I'm not sure exactly what it looks like (and I'm not doing all the work for you 🙂 ), but it would be something like this:

remove_action( 'genesis_before_content_sidebar_wrap', 'page_title_area' );
add_action( 'genesis_after_header', 'page_title_area' );

2. Since you've moved it outside of #inner .wrap, you'll need to modify the function so it has its own wrap. Hop into the function responsible for the page title area, and add <div class="wrap"> at the top and </div> at the bottom (you could also add this inside the .page-title div, but then you might need to modify some styles since right now it's expecting the .page-title to be inside a wrap)

3. Now the content is the first thing inside of #inner, so apply your full width styling to #inner.

[cdils]

Hi Phil,

I think a couple of CSS changes will do the trick. For starters, you'll want to remove the background color from your main #wrap

#wrap {

    background: url("images/bg.png") repeat-x scroll 0 0 #FFFFFF;  //Just get rid of the #FFF

}

That'll free you up to use another background for your #inner.
Add your custom background image to your #inner tag and set the overflow to hidden, like this:

#inner {

    background: url('whatever.png');
    clear: both;
    overflow: hidden;

}

Carrie

---

Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. 🙂

I host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.

[SelenaD]

Can you just add a background image to #content-sidebar-wrap?

Selena

[SelenaD]

Sorry - I reread your post - what I suggested won't give you 100% width. In which case I think Bill is right and you have to move your slider in the functions file.

[PhilMurray]

Thanks Bill, Selena, Carrie

i am going to try out these options to see which one works best

cheers

Phil

[Author]

Posts