Search code examples
htmlcssimagebackground-imagebackground-size

Div background image not shrinking to fit despite using "background-size: cover"

Here's the original image (2880 x 900): enter image description here

And here's how it appears on the rendered page (1280 x 500): enter image description here

1280 x 500 is the dimension of the <div> that contains the image as its background. If you notice, the rendered background is getting cropped instead of shrinking to fit inside the div which is smaller than the original image. My understanding is that a background-size: cover is meant to scale the image up or down without cropping. Why is it not working?

HTML

<div class="page-header-div">
    <div class="page-header-div-image-blog" style="background: url(<?php echo $bannerurl ?>) no-repeat;"></div>
    <div class="downarrow text-center downarrow1" onclick="scrollPage(this);"><i class="fa fa-chevron-down"></i></div>
</div>

CSS

.page-header-div { position: relative; }
.page-header-div-image-blog {
  background-size: cover;
  height: 100%;
}

The exact same markup on another page works just fine! The two pages have the exact same tags used for the snippet. Is there no way to fix this issue through CSS? If so, how can one go about doing it using JS (I would really want to avoid that if at all possible).

Solution

  • You have to use background-size: contain; instead and also set background-repeat to no-repeat.

    From MDN background-size docs:

    cover: A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

    contain: A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.

    Also note that, as @zgood pointed:

    2880 x 900 is a different aspect ratio than your div at 1280 x 500, so event when you use contain you will have a gap

    div {
  width: 1280px;
  height: 500px;
  background-image: url(https://i.sstatic.net/rf8Wg.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
    <div></div>

    See also: