CSS Forum

**wildbackpacker** · 06-18-2009, 12:59 PM

On one of my web pages, I have a background image that repeats, but it doesn't repeat after it reaches the height of the 'main' div. If your browser window is taller than 571px, the background image stops repeating and just shows the black background. This is some of the css that results in my page looking like this, http://coolestontheweb.webs.com/. Any ideas?

Code:

html {min-height: 100%;}

* {
    margin: 0;
    padding: 0;
}

body {
    background: #000000;
    color: #282828;
    font: normal 62.5% Tahoma,sans-serif;
    padding-top: 2px;
}


.inner-container {
    border: 0px solid #000000;
    font-size: 1.2em;
    margin: 0 auto;
    padding: 0px;
    width: 750px;
    height:570px;
    background-color: #222;
    background-image: url(images/bg.jpg);
    background-repeat: repeat;
    back

}

.outer-container {
    padding-bottom: 0px;
    background-color: #000000;
    background-image: url(images/bg.gif);
    background-repeat: repeat;
    
}


.main {
    
    height:571px;
    padding: 0px 0px 0 0;
}

**wildbackpacker** · 06-18-2009, 01:20 PM

Also, I can't find a solution that works to center the main div vertically. Any help? Thanks for your help in advance!

**EricReese** · 06-18-2009, 01:41 PM

Hi,

Well first off, I doubt you want the image to repeat because of the cloud. I do assume that you want the color images in the column to repeat with the content. To do this, you need to cut your image into seperate pieces and apply the image to each element of the page (left column, middle column, right column, footer, etc...)

It does repeat, actuaally, try doing repeat-y instead of repeat. Then set the height to like 1500px, and add more content. As for your vertical aligning issue, there is no set property that does this for you so you will need to incorporate some techniques to do this. Check out some of these articles.

http://murphy.cz/victoria-s-vertical-centering/
http://www.jakpsatweb.cz/css/css-ver...-solution.html

Cheers

**LadynRed** · 06-18-2009, 02:59 PM

How about a much easier solution ? Set the diagonal background on the <body> instead of the outer container

. You really don't want to go putting on set heights, it may come back to bite you later. The other alternative is to use the 100% height on #outer_container - set height:100% on html, body, and then the outer container and it should work.

**wildbackpacker** · 06-20-2009, 05:08 PM

Thanks ladynred! It worked! And thanks your help too eric!