div bg image full width responsive (Wordpress)

neostar

New Member
I am trying to get a page broken into nice sections visually (horizontally)I want to make parts of the page a different background color or image, like so (visually):http://www.forcefactor.com/?fb_lgid=4693&fb_lpid=13766&fb_itid=12932&pid=180&nid=15see the "Why Settle For Mediocrity?" strip, with bg image URL:http://www.forcefactor.com/trial/templates/422/img/lander/science1-but-why-settle.20120904.jpgthe page I am working on is:http://TakeHerHomeTonight.netNotice I have div bg images for the Episodes 2 & 4 sections, and a simple div bg color of darker grey for Episode 7 sectionI am on Wordpress, with the Headway theme, and the issue Im having is that I cant get the width of my div bg's to go beyond the parent, the white middle area #wrapper section (and there's ofcource a little padding on it too)I would like the Episode 7 dark grey bg to stretch all the way across the width of the screen no matter how large or small the monitor of viewer (and also the bg images currently around Episodes 2 & 4)thanks in advanceThis is what I have in my css...\[code\]div.DarkGreyFrameWithInnerShadow {background: transparent url("/images/BackgroundImages/frame-with-inner-shadow942x950-bg.png") no-repeat 50% 50%;-webkit-background-size:100% 100%;-moz-background-size:100% 100%;background-size:100% 100%;background-color: #fff;border: 0;margin: 0 auto;width: 100%;padding: 0;}.DarkGreyFrameWithInnerShadow {padding: 40px 50px !important;box-sizing: border-box; /* This makes it so the padding isn't added to the width--instead, it's part of the width */-moz-box-sizing: border-box;}.DarkGreyFrameWithInnerShadow div.featured-leaf-container, .DarkGreyFrameWithInnerShadow div.featured-post-container {width: auto !important; }div.GreyBGSimple {-webkit-background-size:100% 100%;-moz-background-size:100% 100%;background-size:100% 100%;background-color: #aeaeae;border: 0;margin: 0 auto;width: 100%;padding: 0;}.GreyBGSimple {padding: 40px 50px !important;box-sizing: border-box; /* This makes it so the padding isn't added to the width--instead, it's part of the width */-moz-box-sizing: border-box;}.GreyBGSimple div.featured-leaf-container, .GreyBGSimple div.featured-post-container {width: auto !important; }\[/code\]
 
Back
Top