Reputation: 710

Background image in HTML

Please guide me how to set background image of the web page to full screen.

Also I'd like to this image to show fullscreen for all size monitors and mobile devices..

Right now I have an image with resolution 1920 : 1080 and it only looks good on my 19" monitor with resolution 1440 : 900, but not good on 15.4" laptops and mobile devices.

Please help,

Thanks.

Upvotes: 0

Answers (6)

Punitha Subramani

Reputation: 1477

The background image property for chrome, mozile and opera browsers

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

Upvotes: 0

Benjamin

Reputation: 357

If the background-size: cover; doesn't work for you, for example, if the aspect ratio of the image is wrong, then you can try using background-size: auto 100% to ensure that the picture keeps it's aspect ratio as well as being tall enough to fit the screen.

I think it all depends on the resolution of the image and the maximum size you're willing to have it. But you will need to put media queries into your code to ensure there are no gaps when the screen gets too big or too small.

Upvotes: 0

Praveen Kumar Purushothaman

Reputation: 167220

You can tackle this in two ways:

New browsers, Use the CSS:
```
background-size: cover
```

Old Browsers, use a fake <img /> for the background.

.bg {z-index: 1; position: absolute; width: 100%; height: 100%;}

Upvotes: 0

Bhojendra Rauniyar

Reputation: 85613

Use background-size: cover; for newer browsers:

<div id="bg"></div>


html,body{
  height: 100%;
}   
#bg{
  width: 100%;
  height: 100%;
  background: url(image-path.jpg) no-repeat;
  background-size: cover; /* also include vendor prefixes: you may google */
}

check compatibility using background-size

Better solution for full background image with responsive can be found here

Upvotes: 0