0
Having troubles trying to get image repeat-y to go 100% of browser window height. This is the page background and I am trying to do it in the wrapper div. The image is 1000px wide by 5px high. 
I have tried a few different techniques with no success. When I have the page position  left it repeats no problem but when I use margin: auto; to try and center the page it falls over and the background image appears once but does not repeat.

My css is as follows:
    margin: 0px auto;
    width: 1024px;
    height: ??;
    background: url(img/bg.png) repeat-y;

Is there a CSS to do this or am I better off going for LESS.js or jquery to try and fix this?
2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by scrappedcola
0

Have you set a height of 100% on both the body and html element? Then you can set the height of the wrapper div to 100% and it should work. Also make certain you have some sort of doc type declaration as the first line int he html doc so that you page doesn't render in Quirks mode (a simple <!doctype html> should work or you can go with the longer winded pre-html5 type : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">)

html,body{
  height:100%;
  width:100%;
}

.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.