Community Forums › Forums › Archived Forums › Design Tips and Tricks › Add Background Image to CONTENT AREA
- This topic has 5 replies, 4 voices, and was last updated 11 years, 4 months ago by PhilMurray.
-
AuthorPosts
-
December 15, 2012 at 8:59 am #5402PhilMurrayParticipant
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
December 18, 2012 at 12:23 pm #5964billericksonMemberHere'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.
December 18, 2012 at 12:30 pm #5967cdilsParticipantHi 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.
December 18, 2012 at 2:43 pm #5992SelenaDMemberCan you just add a background image to #content-sidebar-wrap?
Selena
December 18, 2012 at 3:11 pm #5996SelenaDMemberSorry - 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.
December 19, 2012 at 4:26 pm #6267PhilMurrayParticipantThanks Bill, Selena, Carrie
i am going to try out these options to see which one works best
cheers
Phil
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.