Add Background Image to CONTENT AREA

Community Forums Forums Design Tips and Tricks Add Background Image to CONTENT AREA

This topic is: not resolved

This topic contains 5 replies, has 4 voices, and was last updated by  PhilMurray 2 years, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #5402


    There is one element I was wondering about — in one of my client sites 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?





    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.



    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;



    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.



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




    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.



    Thanks Bill, Selena, Carrie

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



Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.