Background Image Scaling

Question

I'm having a problem, pretty much what i'm trying to do is make my background image stay anchored and remain the same size and position not matter how larger the users resolution.

What I have now:

#navigator {
    background-image: url('banner.png');
    background-repeat:no-repeat;
    background-position:top-center;

}

Thanks in advance!

Answer 1

Do you mean background-size ?

#navigator {
    background-image: url('banner.png');
    background-repeat:no-repeat;
    background-position:top-center;
    background-size: 200pt 300pt;
}

(as from http://www.w3schools.com/cssref/css3_pr_background-size.asp )

It will work for most modern browsers compatible with CSS3.

Answer 2

You will want to learn about the meta viewport options. One that I use all the time is target-densitydpi , this is Android specific. <meta name="viewport" content="target-densitydpi=device-dpi" />

Answer 3

try this, it works for me,

html, body, <or your div>
 {
    background-image:url("fdkljg.kdf");
    background-size:100%;
    background-repeat:no-repeat;
    top:0px;
    left:0px;
    right:0px;
}

and if that doesn't work, try out the "background-position" property to center or left. and once you are done with the code, try zooming in and out the web page to simulate the screen resolution.