CODEWITHSUNDEEP
htmlcssimageloadonload
user3296938
user3296938

Reputation: 65

Loading big image on web page as background

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

Upvotes: 0

Views: 225

Answers (5)

raj
raj

Reputation: 93

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...

Upvotes: 1

user3296938
user3296938

Reputation: 65

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.

Upvotes: 0

Hendra Nucleo
Hendra Nucleo

Reputation: 591

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

Upvotes: 1

Dylan de St Pern
Dylan de St Pern

Reputation: 469

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

Upvotes: 0

wribit
wribit

Reputation: 605

CSS:

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

Upvotes: 0

Related Questions