-
How to make a background go beyond the boundaries of the element (CSS)?
I have a site I’m working on, and the footer section moves up and down depending on the length of the content. I’m using a design where the background of areas of the page appear to run clear from one side of the browser to the other, even though the content is only near the center. The main background image accomplishes this for the header and the content area.
However, because the footer area is such that it can adjust from page to page, based on the length of the content, it needs its own background. But since the footer is inside the main content wrapper of that holds the rest of the page in the center, the background of the footer only goes to the widths of the main content area.
Is there a way to tell just the background image of the footer to start all the way on the left and go all the way right (beyond the wrapper boundaries). I assume there must be a way with absolute positioning, but after looking through w3schools.com’s CSS2 reference and not finding the right thing, I thought I’d ask here.
Thanks in advance for any help.
–Tevya
-
8 Replies
-
please post a link to your site
-
donerightutah.com
Its all just the default stuff for the WP theme. I want to be able to put a white background image behind the black 3-column footer area, but have the background go edge-to-edge like the header area does. Thanks.
–Tevya
-
The trick with CSS layout usually is in understanding the box model.
Your footer is a box and you want it to have the width of your page, but your footer is inside another box, your wrapper, and your wrapper has a defined width.
You need to put your footer outside your wrapper so it normally fills the width of your page.
If you want your footer to has the same width of your wrapper but the background extend from side to side, you can end your wrapper, add a div for your bg footer color and inside place your centered footer with a fixed width.
Am I making any sense?
-
Yeah, that makes a lot of sense. And was kinda what I was thinking I would have to do. I was hoping that there was a way to give the background image an absolute position so that it would go beyond the bounds of the footer and wrapper. A little CSS to do this (if possible) would be a lot easier than restructuring a large portion of this WP theme.
I know I’ve made images position outside of the wrapper and such with CSS, but I’m no expert and can’t remember how. I just thought that maybe there was a way to do the same with a background image. Anyone have any ideas?
–Tevya
-
Well, if you want to use CSS then you can add a background image to your BODY tag, repeat it on the x and algin it to the bottom. But I don’t know if that’s a better solution, because if anybody changes the default font size of his broser (beleve me, a lot of people do that) then it’s possible your layout will mess up.
-
I did as you suggested. It took some doing, but is working. I’ve just gotta figure out how to center the footer area now.
–Tevya
-
You can place another div inside with a fixed width and center it the same way you are centering the rest of your elements
margin-left: auto;
margin-right: auto; -
Finally got it! Thanks a lot for all your help. I really appreciate it.
–Tevya
Reply to this Discussion! Login or Sign Up