Best method for making Hero Image fill entire screen on mobile without ruining quality?

Question

I'm trying to replicate the way these images change on this website when you shrink the screen https://sweetbasilvail.com/

I went ahead and added the css I saw from their site, but it still is just shrinking my image on mobile instead of doing of this site is doing

      .hero {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #211f1f;
      }

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-size: cover;
        background-position: center;
      }

So I have this image that I want to be the background for my entire home screen, but if I use this code below and shrink it to mobile, it basically squishes the image.

 img {
width: 100vw;
height: 100vw;
 }

And on mobile it ends up looking like this

If I use the regular responsive css, it shrinks the image and ends up leaving a huge white space below

 img {
 width: 100%;
 height: auto;
 }

So I'm not sure how to display an image as the entire background without sacrificing the quality of the image or distorting the way it looks. Is it normal to just have the image shrink on mobile? or is there a proper way when using a full image background?

Note the 2nd image with the giant white space is what the original image is supposed to look like at 100% width;

score 4 · Answer 1 · answered Oct 27 '20 at 22:24

4

Use background-size: cover

#bgimg{
  height: 100vh;
  width: 100vw;
  background-image: url(https://placekitten.com/1000/500);
  background-size:cover;
  background-position: center;
}

<div id='bgimg'></div>

answered Oct 27 '20 at 22:24

symlink

11,984
7
29
50

nothing looks different by adding ` background-size:cover; background-position: center;` it looks the exact same as `height 100vh` and `width 100vw` – Johnxr Oct 28 '20 at 01:31
@Johnxr are you attaching it to a div as a background image? – symlink Oct 28 '20 at 01:39
i just hard coded in my HTML to test it out right now. – Johnxr Oct 28 '20 at 01:41
I added an example website for reference of what I like the effect to do. For some reason I copied their exact css yet my image still just shrinks and doesn't replicate what their site does – Johnxr Oct 28 '20 at 02:10

mah111 · Answer 2 · 2020-10-28T06:11:55.687

You want to keep the proportions, so you use width: 100% on a div and change its background image. This is much easier to manipulate than an HTML img tag.

Quick code snippet on CodePen (https://codepen.io/ma-henderson/pen/eYzGwJe?editors=1100)

<div class="container">
<header class="header">
  <nav class="header__nav-item">Our Menu</nav>
  <nav class="header__nav-item">Our Concept</nav>
  <nav class="header__nav-item">Locations</nav>
</header>

<div class="hero"></div>

<footer class="footer">
  <nav class="footer__nav-item">Gallery</nav>
  <nav class="footer__nav-item">Special Events</nav>
  <nav class="footer__nav-item">Catering</nav>
</footer>  
</div>

.container {
  posiiton: relative;
}

.header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 1rem 0;
  z-index: 3;
  color: white;
  background: rgba(0,0,0,.3);
  
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;  
}

.hero{
  background-image: url("https://images.unsplash.com/photo-1572116469696-31de0f17cc34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80");
  /*   I've added the below line to keep it always centered regardless of viewport width, change it to your liking, you can google "background-position w3 schools" for more info */
  background-position: 50% 50%;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.footer{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
  z-index: 3;
  color: white;
  background: rgba(0,0,0,.3);
  
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;  
}

I added an example website for reference of what I like the effect to do. For some reason I copied their exact css yet my image still just shrinks and doesn't replicate what their site does — Johnxr, Oct 28 '20 at 02:10
Ok, that helps a bit on understanding what you want, I've changed my answer (check out the codepen) to have a more robust Html/CSS combination. I hope I didn't add stuff to the point that my answer is confusing. I'm still using background-image, as I find it very hard to manipulate an img tag for a background. — mah111, Oct 28 '20 at 06:10

score 0 · Answer 3 · answered Oct 27 '20 at 22:24

You have two options, depending on exactly what your use case is.

If you'd like the img to fill the entire screen but without distortion you can use object-fit: cover. Of course, with this if the image is very wide compared to height you will get some bits cropped from the left and right in portrait mode, and conversely top and bottom in landscape mode - but in either case the screen will be covered.

If it's important that the user sees the whole of your image regardless of its aspect ratio in relation to the viewport aspect ratio then use object-fit: contain. This will result in some space either to the sides or the top and bottom of the image depending on how its aspect ratio compares to the viewport's.

object-fit is quite widely available on browsers, but not on any version of IE.

Note: for background-image as opposed to img use background-size: cover or contain.

I added an example website for reference of what I like the effect to do. For some reason I copied their exact css yet my image still just shrinks and doesn't replicate what their site does — Johnxr, Oct 28 '20 at 02:10

score 0 · Answer 4 · answered Oct 27 '20 at 22:25

Doing that is not really ruining the quality, it's stretching it because that is what you are telling it to. The second option is normal, you just want to probably fill it up with content below so that its not white space. But that doesn't fill up the entire screen.

You probably want to use a media query so that the browser detects when the user is on mobile, then you can crop the sides of your image to make it fit without stretching it, either manually using something like Photoshop, or with CSS, which is answered here on how to do it: How to automatically crop and center an image

I added an example website for reference of what I like the effect to do. For some reason I copied their exact css yet my image still just shrinks and doesn't replicate what their site does — Johnxr, Oct 28 '20 at 02:10

Best method for making Hero Image fill entire screen on mobile without ruining quality?

4 Answers4