Need Help Making Background Image Fully Visible on Homepage

HTML & CSS
1

Hey everyone

I’m working on a homepage design and running into an issue where the background image gets cut off or zoomed in too much on certain screen sizes.

Here’s the situation:

  • The image is applied using background-image in CSS
  • I’ve tried adjusting background-size, position, and height on the parent container
  • Sometimes it shows just a part of the image, especially on mobile

Here’s what I’ve got so far:

.hero-section {
  background-image: url("header.jpg");
  background-size: cover;
  background-position: center;
  min-height: 650px;
}
2

What is that you want your image to do on mobile exactly?

You have a min-height of 650px and a mobile screen width will be around 320px smallest so what exactly can you show on your image when the screen is 320 x 650? If your image is a landscape image then it will be cropped to fit the dimensions available. You can’t for example show a picture of a landscape and have look the same on portrait. Something has to give. You either use the cover value which makes sure the image covers the area required or you use the contain value which will make sure the whole image is visible but will leave big gaps all around.

You need to choose images carefully so that when they are delivered to different screen sizes they work well. This usually means having a smaller focal point of the image so that when cropped the background is just lost a bit at the edges but the focal part remains.

Alternatively use media queries and swap out for a better sized image as the screen gets smaller.

That’s basically all the choices.:slight_smile: