CODEWITHSUNDEEP
htmlcss
buydadip
buydadip

Reputation: 9417

Trouble scaling image in css

I want a particular picture to cover the entire background of my site and when the window is resized, I want the picture to be scaled accordingly. What I'm looking for is something like https://www.tumblr.com. Notice the picture in the background scales accordingly to the window size.

Here is my css:

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#backdrop {
  z-index: -999;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

Where #backdrop is the id for the image I'm using.

I've tried numerous things but nothing seems to change the way my image is displayed.

Upvotes: 0

Views: 46

Answers (2)

Thomas
Thomas

Reputation: 2367

Use object-fit to let an img behave like a background-image. See this working example:

html, body {
  height:100%;
  margin:0;
  padding:0;
}

img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<img src="http://lorempixel.com/g/1100/300">

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Two things:

  • Change the height: auto; to height: 100%, and add background styles.

    #backdrop {
  z-index: -999;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url("image.jpg") center center no-repeat;
  background-size: cover;
}

  • Also, use a HTML 5 Doctype:

    <!DOCTYPE html>

Upvotes: 1

Related Questions