CODEWITHSUNDEEP
csshtmlbackground-imagerepeat
Kane
Kane

Reputation: 909

Background image not repeating vertically

If you scroll to the bottom of this page - http://dev.socialadr.com/get/begin06 - you'll see that the white background w/ drop shadow stops near the end.

This is the image file that I want to repeat vertically: http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif

The CSS file being used is: http://dev.socialadr.com/_css/css.php

And I believe it's this #page_wrapper id that needs to be modified:

#page_wrapper {
    width:1014px;
    margin:0 auto;
    padding:0;
    min-height: 300px;
    background: url(http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif) repeat-y center top;
    height:100%;
}

I've tried tons of different things, read a bunch of other StackOverflow posts about similar issues but for the life of me I can't get it to work.

Any ideas?

Thanks! Kane

Upvotes: 0

Views: 4531

Answers (2)

knite
knite

Reputation: 6171

Your live CSS does not include the repeat-y property given in your pasted code.

Additionally, your image file is very large. Since the image is meant to be tiled, the image height should be the height of one tiling.

You should also break the image up into two pieces and set them as backgrounds on two different elements. Tiling the current image will include the top part of the box with the corners, which is not what you want. Set the corners-only image as the background on one element, then the tile image on another element with repeat-y.

Upvotes: 3

bricker
bricker

Reputation: 8941

Try placing quotes around the URL:

background: url('http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif') repeat-y center top;

Upvotes: 4

Related Questions