Hi,
http://www.redrunner.co.uk/rr/?q=content/home-page#
The design I am trying to recreate can be seen here:
http://www.redrunner.co.uk/rr/themes/framework/img/RedRunner.jpg
I would like to know how I can have two background images that repeat
across the browser and still keep all my content in the 980px wide
container. I have set a b.g. for the body, this is for the header
section. I want to do the same for the footer, but the footer lives
inside the container which isn't 100% width. The pages are also going
to vary in size so having the header and footer background in 1 image
won't work.
Ideas that I have had are:
1. place the footer outside of the container and then make an inner
div for the content of the footer with the same margin and width as
the container (container 2).
(I found a link demonstrating this http://cssgirl.com/examples/full-width.html
)
2. place a 'footer background image' div outside of the container,
give it absolute positioning and a lower z-index. Problem was that it
stuck to the bottom of the browser even if there was scroll.
3. Give #html a background image too.
4. ?
I see this style being used all over the place (web 2.0) but I can't
figure out how. Please help.
Here's the bare-bones of a web page, feel free to insert any divs and
css that may get this working.
body style=background: url(images/bg.jpg) repeat-x top centre;
container style=width: 950px margin: 0px auto
headerblurb/header
contentBLURB/content
footercopyright 2009/footer
/container
/body
Thanks, CB
P.S. If anyone knows where the padding at the top of my #navcontainer
is coming from then that would be a great help. I am using firebug now
but when I make changes to likely culprits the problem still remains.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
