Tom Hanson
Tom Hanson

Reputation: 153

Background image not repeating

Ive been having troubles getting my background to repeat itself vertically. CSS Code

html {
    background-color: black;
}
body {
    margin: auto;
    width: 1000;
    background-image:url("../images/background.png");
    background-repeat:repeat-y;
}

I can't figure it out. Please help! I've tried without quote, with quotes, full address... I'm stumped

There is content in the page. http://www.hott-source.com

Upvotes: 0

Views: 6916

Answers (6)

Joonas
Joonas

Reputation: 7303

Your

#ContentPlacer { position: absolute; }

is causing the #PageWrapper and body to ignore most of your content height.

Remove that position: absolute;.


As a side note:

You might want to consider removing the <img src="banner.jpg"> and put it as a background image into the #Banner. You can then position the menu easily on top of it by putting the #Menu it inside the #Banner element.

Upvotes: 0

Sobin Augustine
Sobin Augustine

Reputation: 3765

atleast give the min-height as the height of the background image.

 html {
        background-color: black;
    }
    body {
        margin: auto;
        width: 1000px;
        min-height:;//height of the image
        background:url("../images/background.png") repeat-y;
    }

Upvotes: 0

Eswara Reddy
Eswara Reddy

Reputation: 1647

If you are giving any background image you should give both height and width for that.

height:100%; or min-height:500px;
width: 1000px;

Upvotes: 0

Srikanth Kshatriy
Srikanth Kshatriy

Reputation: 444

You are repeating y so you need to give height for body. Or try loading with more content and check..effect may not be visible bcoz of no content.

Upvotes: 0

R&#225;pli Andr&#225;s
R&#225;pli Andr&#225;s

Reputation: 3923

You have no height for the body, there's no content in it, so you can't see the repeat-y in effect.

Upvotes: 1

PI.
PI.

Reputation: 1668

You will need to add a height which is at least the same size as your background image.

Upvotes: 0

Related Questions