Question

I created a background for my website using CSS code it successfully worked but the problem is once I run it on different screen whether it was big or small I don’t get similar consequences. When I run it on 13 inch screen the browser zooms in and the form what I get is probably not the same as in 18 inch well it obviously wouldn’t have the exactly form but more or less I need it to be shown look-like. any suggestions? thnx in advance

body {
background-image: url(../images/background.jpg);
background-repeat: no-repeat;
    }

An addition problem I have now is that the background isn’t full-screen. its resolution is 1920×1080, though I can see the picture on the whole web browser page but still I couldn’t see other details of the photo.

Answer 1

I think you need

background-size: cover;

There are some browser inconsistencies, which might mean it is better to use a jquery plugin.

Have a look at http://srobbin.com/jquery-plugins/backstretch/ it allows you to use a background image which resizes depending on the size of the screen. It also deals with IE. Nuff said.

Also look at http://css-tricks.com/perfect-full-page-background-image/

I’m not 100% on what you are trying to achieve but the above links are worth a look.

This is the css3 way

html { 
    background: url(../images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}