CODEWITHSUNDEEP
css
Mithun Adhikary
Mithun Adhikary

Reputation: 103

set background image when window is resize

I am trying to set background image in my html body. When window size is 1280px this time background image is set to the whole body, If window size bellow 800px; width has no problem, but height is gradually decrease, but i want to set background image width and height is set to the full screen, when window is resize. 

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

Upvotes: 3

Views: 784

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25485

The property 'background-size: cover' has plenty of advantages, and you are almost there.

The following should do the trick for you and you can see it in action at
http://jsfiddle.net/panchroma/gXGcD/

You will see that I'm also forcing the height of the body and html elements to be 100%, and have also centered the positioning of the background image.

background-size is supported in IE9, for support in IE8 there's a polyfill @ https://github.com/louisremi/background-size-polyfill

Good luck!

body
{
background: url(https://dl.dropboxusercontent.com/u/2665617/bootstrap/images/image1.jpg) no-repeat; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;   
background-position: 50% 50%;
height:100%;
}

html{
height:100%;
}

Upvotes: 2

ralph.m
ralph.m

Reputation: 14345

If you don't mind the image distorting, you can use this:

background-size: 100% 100%;

Upvotes: 0

Related Questions