css cutting off instead of scaling down

Question

Using the following css, I am trying to use the attached image as a background image. I expected the image to resize in a scalable way as I made the browser smaller, however, at 600px the woman's head is no longer visible. In other words, instead of reducing the proportions of the contents of the image (i.e. scaling down) the css is simply cutting off the right side of the image. Is there a way to scale down the image rather than have the css cut off the right side of it when reducing browser size?

html {
    height: 100%;
}
body {
    font-family: Lato, sans-serif;
    color: #333;
    font-size: 15px;
    line-height: 23px;
    font-weight: 300;
}
.hero-section {
    width: 100%;
    background-image: url('./3479295472_7d97d686e4_b_couple.jpg');
    background-position: 50% 45%;
    background-size: cover;
}

<div class="hero-section">
  <div class="hero-overlay-section">
    <div class="container hero-container w-container">
    <h1 class="hero-title" data-ix="hero-fade-in" style="opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity 500ms, transform 500ms;">Jim</h1>
    <h1 class="and hero-title" data-ix="hero-fade-in-2" style="opacity: 1; transition: opacity 1500ms;">&amp;</h1>
<h1 class="hero-title" data-ix="hero-fade-in-3" style="opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity 500ms, transform 500ms;">Karen</h1>
<div class="hero-divider-line" data-ix="hero-fade-in-4" style="opacity: 1; width: 120px; transition: opacity 500ms, width 500ms;"></div>
    <div class="hero-date-wrapper">
    <h2 class="hero-date-title" data-ix="hero-fade-in-5" style="opacity: 1; transition: opacity 500ms;">November 5th, 2018</h2>
    </div>
</div>
</div>
</div>

Note, according to a comment on this SO question background-size should help but it's not in my case.

Update:

I have also tried with and got the same results (the woman's head is cut off once I reduce the browser size).

background-size: contain;
background-repeat: no-repeat;

Note, the image is creative commons from https://www.flickr.com/photos/heroiclife/3479295472/in/album-72157617283714929/ — Leahcim, Aug 15 '17 at 19:51
You still want the background image to fill the height right? You can't really have the image to fill both height and width, while maintaining the aspect ratio, not to crop off something from the image. Or do you want to crop the image from the left side instead of the right? — Nelson Yeung, Aug 15 '17 at 19:57
[CSS Scaled Background Image](https://stackoverflow.com/questions/5766825/css-scaled-background-image) At the link above your question is perfectly answered. — Mountain Gold, Aug 15 '17 at 20:00
@NelsonYeung Ok, that makes sense. Thank you. Can you present me some options? In this case, for this photo, it's most important to keep the faces of the couple (obviously). It's less important to preserve the height. Can that be specified? Also, it's preferable to cut from the left rather than the right. Can that be specified? — Leahcim, Aug 15 '17 at 20:01
for cutting from the left rather then right change your background-position to 100% 45% — Marouen Mhiri, Aug 15 '17 at 20:06

score 5 · Accepted Answer · answered Aug 15 '17 at 20:17

What both other people have said about background-size: cover; and background-position: center center are correct.

Basically, you have two options.

You can force the image to never get cropped. Best example of this is the default behavior of an <img>. It will squish and resize, but it won't get cropped. The downside of this is that you must maintain the original aspect ratio of the image.
You can disregard the aspect ratio of the image and tell it to fill a container no matter the ratio. This is the background-size: cover; background-position: center center;, solution. You can play with the position so that the important parts don't get cropped.

If you must keep the aspect ratio, and have it fill a container, then the only solution is black bars on the top/bottom or left/right (like watching a widescreen movie on a 4:3 TV).

score 1 · Answer 2 · answered Aug 15 '17 at 20:03

You can't display the image to fit perfectly with any size container, you have to lose some parts.

What you can do is choosing the most important part of the image to be displayed, this is done by manipulating background-position

Usually, in most cases, the most important part is the center. So we use background-position: 50% 50%; background-size: cover;

You can start from this.

score 1 · Answer 3 · answered Aug 15 '17 at 20:10

There are several ways you can fix this issue the best of which is using HTML5. Here is the code:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

The source of the code and additional ways and demos could be found in https://css-tricks.com/perfect-full-page-background-image/

score 0 · Answer 4 · answered Aug 15 '17 at 20:17

Add a height in pixels to the body. I added 700px, but you can add anything you like.

In the hero-section, change your CSS to the following:

    .hero-section {
    width: 100%;
    height: 100%;
    background-image: url('./3479295472_7d97d686e4_b_couple.jpg');                         
    background-size: contain;
    background-repeat: no-repeat;
   }

What seemed to be the key is specifying both the height and width along with the background-size and background-repeat instructions.

The height and width can be adjusted to your preferences and the image will scale.

css cutting off instead of scaling down

4 Answers4