The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Making background images repeat further than screen size on given website

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #33745

    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!

    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


    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”.


    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


    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




    #container {
    margin:0 auto;
    width: 960px;
    #header, #nav, #content, #footer {

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.