CODEWITHSUNDEEP
css
Howard Zoopaloopa
Howard Zoopaloopa

Reputation: 3822

CSS background repeat problem

I've got a background image that I want to extend the length of my page along the left margin.

Here is my css...

body, html{
    height:100%;
}
#content{
    background:url(../images/leftBorder.png);
    background-repeat:repeat-y;
    height:100%;   
}

that has a great result:

good result

Until the content in my page reaches past the page fold line, at this point if I scroll down I get this:

bad result

All the content is inside a div with the id of "content".

Thoughts?

Upvotes: 2

Views: 5487

Answers (4)

amine dimaana
amine dimaana

Reputation: 27

you can use fix the background image, so whenever you scroll down it remains in its place

#content{
    background:url(../images/leftBorder.png);
    background-repeat:repeat-y;
    height:100%;
    position:fixed;
}

plain and simple

Upvotes: 0

jrn.ak
jrn.ak

Reputation: 36619

How about this:

CSS:

body {
    background: url('../images/leftBorder.png') repeat-y;
}
#noise-wrap {
    background: url('../images/noiseBackground.png') repeat-y;
    position: fixed;
    top: 0; right: 0;
    bottom: 0; left: 0;
    z-index: -1;
}

HTML:

<body>
    <div id="noise-wrap"></div>
    <!-- content -->
</body>

Note: Your 'noise' background will not scroll with the rest of the page.

Upvotes: 0

Samir Talwar
Samir Talwar

Reputation: 14330

Your #content element has a height of 100%, so anything below the fold will not be inside it, but will overflow. You can solve this by using min-height instead.

#content {
    min-height: 100%;   
}

Bear in mind min-height is not supported in all browsers. In particular, this will not work in IE6 and below. You can use conditional comments to apply a different style for IE6 that sets the height property as you were before, which should actually behave as you expect due to a quirk in its rendering.

Upvotes: 3

cwharris
cwharris

Reputation: 18125

The content div is not expanding like you think it is. In reality, it's only being expanded to the height of it's parent, and so on... so it's max size is determined by the body, html, and the window. Try this:

body, html{
    height:100%;
}
body {
    background:url(../images/leftBorder.png);
    background-repeat:repeat-y;
}
#content{
    height:100%;   
}

Or, just

body {
    background: url(../images/leftBorder.png) repeat-y;
}

Upvotes: 0

Related Questions