Making background images repeat further than screen size on given website

[Olliepop]

Hi there! I’ve been an avid reader and found many of the tips on this css blog to be of immense use for my various projects… Now i’ve started something a little different from my usual work and aiming to create a nice template for my new entertainment blog/website. For the first time in my life, it will be tableless :)

This is the URL for the current version of the template – please view the source :) The stylesheet may be a bit messy at the moment, i apologise!
http://wiu2.com/wiu2/

The problem as you can see as you scroll down is that the text “Why isn’t this text over the bg images?” is not over the background images of the DIV’s, despite being in their respective containers. The background images only reach the bottom of the screen.

Is this because of the ‘Height: 100%;’ property i have been using throughout? Can i replace this with something to competely remedy it, or do i have to restructure my containers?

Any and all help is so very much appreciated!

Thanks a lot, Ollie

[czajah]

I think it’s because of “position: absolute” property of #contentcontainer – absolute positioned elements are treated as “no dimension” (i mean width:0px; height:0px;) elements so they do not stretch a parent element.

Try change position to “relative”.

[Olliepop]

No luck by changing the position of #contentcontainer, #maincontainer, #container3 to “Position: relative;”

Thanks, Ollie

Edit: i didn’t mention that the purpose of the backgrounds is to scale to the page height

[Mitchell]

This is a problem I have come across a few times when setting heights or widths to 100%.
The viewport when the page loads is classed as 100%, so when you go beyond this by either scrolling or zooming out, the div is no longer shown.

However, your page is structured in a very strange way.
I usually use the follow a basic markup of

HTML

Header (Logo, Ads)





Navigation Links





Content





Footer

CSS

#container {

margin:0 auto;

width: 960px;

}

#header, #nav, #content, #footer {

width:100%;

}

Then obviously style each section how I want it to look, i.e. adding the stripey background to the content div etc. This will then become the right size when the content goes in.

[Author]

Posts