CODEWITHSUNDEEP
htmlcss
boropu
boropu

Reputation: 1

Make background image fill background

This seems to be a common question but the existing answers I see do not seem to work for me. I have a background image that is much taller than it is wide. I would like the height to be 100% of the height of body. So far I have tried:

body, html {
    height: 100%;
    min-height: 100%;
}

body {
    background:url("NewLogo.png") no-repeat center center;
    background-size: 100% auto;
}

I have also tried changing background-size: cover; but this also just makes the image large but cuts off the top and bottom.

Upvotes: 0

Views: 53

Answers (2)

Leila Fahim
Leila Fahim

Reputation: 11

Please note that if you want to have a background image which is cover and has got it's own height (without just being large, as wide as your browser but loosing the top & bottom as you said), you can try giving an appropriate height in vh to your background image.

body {
      margin: 0;
    }

#image {
  background-image: url(https://images.unsplash.com/photo-1504387103978-e4ee71416c38?auto=format&fit=crop&w=2134&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
  background-repeat: no-repeat;
  height: 293vh;
  background-size: cover;
}
<div id="image">
</div>

Otherwise if you just want to make your background image cover, or if you want make it contain(though your image wouldn't fit the browser wide, it would be in it's real height), you can visit the following link: codepen>background-size>CSS-Tricks

Upvotes: 1

steliosbl
steliosbl

Reputation: 8921

Use contain. This will guarantee that the entire image appears in the container, and nothing is cut off:

body {
    background:url("NewLogo.png") no-repeat center center;
    background-size: contain;
}

Upvotes: 5

Related Questions