How to center background image on a narrow screen vertically

Question

I use an image as a backround, something like this:

<div class="container">
  <img src="http://somestorage.com/img.png" />
</div>

css:

.container {
  position: absolute;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  text-align: center;

}
.container img {
  min-width: 100%;
  min-height: 100%;
}

The problem is thought, that I wanna have a central top part on narrow screens. Now it shrinks like this:

I wanna it be like here:

JsFiddle

Could anyone suggest a solution?

does the user need to be able to scroll back and forth across the image or do you want it cropped? — Lewis Lockhart, Jun 15 '20 at 21:19

score 0 · Answer 1 · answered Jun 15 '20 at 21:26

I would try something like this:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  text-align: center;

}
.container img {
  min-width: 720px;
  min-height: 480px;
}

You could also change out the images for differing sizes of screens using media queries.

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}
@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}
@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

ref: https://web.dev/optimize-css-background-images-with-media-queries/

score 0 · Accepted Answer · answered Jun 15 '20 at 21:30

Simply I changed min-width: 100%; with width: 100%; and added object-fit: cover;

.container {
  position: absolute;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.container img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
}

<div class="container">
  <img src="http://img.ohandroid.com/android/TJ0mc.png" />
</div>

How to center background image on a narrow screen vertically

2 Answers2