Loading big image on web page as background

Question

I have image (Dimensions - 1600 × 585, File size - 292 KB, MIME type - image/jpeg) with natural size 1600 x 585 pixels and on page it takes size 1903 x 580 pixels.

Problem : on page load this image appears as small (not as natural size) and then stretche out on page. When connection is not fast, it looks not good.

How can i fix this problem?

img {height: 580px;position: absolute;width: 100%;z-index: 0;border: 0;vertical-align: top;}

Answer 1

Correct solutions in my case is :

img{height: 580px; position: fixed; width: 100%;z-index:0;top: 0;left: 0;}

I try every other answers, but every have some 'defects' (image starting loading as with width and then streches). Thanks @Dylan de St Pern for suggestion, this helps position:fixed.

Answer 2

Update answer :

.yourDiv {
   background-image: url('../path/to/your/image');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: fixed or scroll;
   background-attachment:fixed;
} 

Answer 3

use this function with it while calling the image in css as background

  background: url("ur image") no-repeat cover ;

there are different functions for me cover works fine...

Answer 4

CSS:

    body{
        background: url(../images/page_background.jpg) 0 0 repeat;
    }

Answer 5

CSS:

body{background-image:url('root/myimage.jpg'); background-repeat:no-repeat; margin:0;}

ALSO:

set a background color for if the image takes a moment to load:

body{background-color:#333;}