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 1 year, 3 months ago.

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

    PhilMurray
    Participant
    Post count: 39

    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

    #5964

    billerickson
    Participant
    Post count: 16

    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.

    #5967

    cdils
    Participant
    Post count: 399

    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 tweet @cdils.

    #5992

    SelenaD
    Participant
    Post count: 19

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

    Selena

    #5996

    SelenaD
    Participant
    Post count: 19

    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.

    #6267

    PhilMurray
    Participant
    Post count: 39

    Thanks Bill, Selena, Carrie

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

    cheers

    Phil

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

You must be logged in to reply to this topic.