Member Avatar for RahsAlGhul 
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
  • 237 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by scrappedcola
Member Avatar for scrappedcola

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%;
}

.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.