CODEWITHSUNDEEP
jquerycss
stop
stop

Reputation: 7

Background image-Full scale

You'll need to open the following page with edge or mozilla.
Here is the page: codepen.io
Here is what I have tried:

html{
  max-height:1900px;
  max-width:2600px;
}

So when the visitor zooms out I don't want the image to shrink and reveal the white space. I want the image to stay the same and zoom out. I hope that what I say makes some sense.

Note: I use jquery to get the background image.

document.body.style.backgroundImage = "url(http://eskipaper.com/images/sunny-day-4.jpg)";

Upvotes: 0

Views: 100

Answers (1)

busuu
busuu

Reputation: 633

Why would you load an image to the body using jquery? That's an overkill. You can just load it via CSS:

html { 
  background: url('http://eskipaper.com/images/sunny-day-4.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

This will make your image stay fixed size on zoom. There's no need for javascript.

Live example: http://codepen.io/anon/pen/ZONGZX

Upvotes: 2

Related Questions