CODEWITHSUNDEEP
htmlimagebackground-size
darkchampionz
darkchampionz

Reputation: 1234

HTML - Background size contain gives too small image

I use:

<style>
body {
    background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}
</style>

in an attempt to have a background image that always stretches to show the whole image but as I test this, the image turns to be way to small... What is the matter of this?

Upvotes: 1

Views: 1653

Answers (2)

Asons
Asons

Reputation: 87303

You need to give the body a height.

html, body {
     height: 100%;
}
body {
    background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

Or you can add a "background div".

#bkg {
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  
  background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
  background-repeat: no-repeat;
  background-size: contain;
}
<div id="bkg"></div>

Upvotes: 4

Kelv.Gonzales
Kelv.Gonzales

Reputation: 558

This will show the full resolution of the image by taking out background-size:contain

Results

Upvotes: 1

Related Questions