Different background image for different screen size

Question

I am trying to give different background images for different screen sizes. The background-image should be visible completely. I tried this solution enter link description here but it's not working out. Firstly, how to give height property for different screen sizes and what are image sizes applied to mobile screen, tablet screen and desktop screen.

.miracle {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; 
  background-size: cover;
  background-image: url(https://i.postimg.cc/Y0sWXBXs/Anti-Aging-1280x712.jpg);
}

/*--For mobile devices--*/
@media (max-width: 480px) {
    .miracle {
        background-image: url(https://i.postimg.cc/T3Wr4hvq/Anti-Aging-768x600.jpg);
    }
}

/*-----For tablets: ---------------*/
@media (min-width: 481px) and (max-width: 1024px) {
    .miracle {
        background-image: url(https://i.postimg.cc/T3Wr4hvq/Anti-Aging-768x600.jpg);
    }
}

/*-----For desktop devices ------*/
@media (min-width: 1025px) {
    .miracle {
        background-image: url(https://i.postimg.cc/Y0sWXBXs/Anti-Aging-1280x712.jpg);
   }
}

<div class="miracle"></div>

Answer 1

For an article that is written in 2020 the approach does not make sense in a few ways. Not trying to talk bad about the author but here is the thing.

1. You should have a mobile first thinking so your first background-image should be for mobile, so your first media query should be for the next size and so on,

example: keep in mind the first is mobile

.miracle {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url();
}

/* next size - tablet */
@media (min-width: 768px) {
  .miracle {
    background-image: url();
  }
}

/* next size - tablet landscape and it covers desktop */
@media (min-width: 1024px) {
  .miracle {
    background-image: url();
  }
}

/* next size - larger desktops */
@media (min-width: 1280px) {
  .miracle {
    background-image: url();
  }
}

as for the height it depends if miracle is your main container or it has a parent that controls the height. If it is your main you add heights to .miracle, two examples here.

.miracle {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url();
  height: 280px;
}

/* next size - tablet */
@media (min-width: 768px) {
  .miracle {
    background-image: url();
    height: 380px;
  }
}

Use object-fit on the image tag instead of background-image. That way you can get the same effect as an background-image with the benefits of the image tag. My example also takes advantage of srcset meaning you can set all the images you want for breakpoints and the browser will take care of it. Browser support for object-fit is great, of cause IE is the problem, if you need the support for that, not to worry my example has polyfill that handles that (a javascript).

if ("objectFit" in document.documentElement.style === false) {
    const images = document.querySelectorAll(".background-images");

    for (let image of images) {
        const parent = image.closest();
        const objectFitType = getComputedStyle(image).objectFit;

        if (parent !== null) {
            parent.style.backgroundImage = `url(${image.src})`;
            parent.style.backgroundSize = objectFitType;
            parent.classList.add("no-object-fit");
        }
    }
}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    background-color: #040A19;
}

.hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: #ededed;
    padding: 2rem;
    margin: 2rem;
    height: 40rem;
    overflow: hidden;
    border: .5rem solid #ffffff;
}

.hero__headline {
    position: relative;
    z-index: 10;
    display: inline-block;
    font-size: 2rem;
    color: #090909;
    background-color: #ffffff;
    padding: 1rem;
}

.hero__images {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.use-content {
    padding: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    margin-left: 2rem;
    background-color: #263749;
    color: #ffffff;
}

.use-content__headline {
    margin: 0 0 1.6rem 0;
}

.use-content__list {
    padding: 0;
    margin: 0 0 0 1rem;
}

.use-content__list li {
    margin-bottom: .5rem;
    
    &:last-child {
        margin-bottom: 0;
    }
}

pre {
    display: inline-block;
    padding: .25rem;
    margin: 0 .2rem;
    background-color: #0E1828;
}

<div class="hero image-parent">
    <div class="hero__headline">Audi e-tron GT</div>
    <img class="hero__images background-images"
        sizes="(max-width: 2121px) 100vw, 2121px"
        srcset="
            https://source.unsplash.com/cpTecdXH3q8/600x700/ 600w,
            https://source.unsplash.com/cpTecdXH3q8/994x700/ 994w,
            https://source.unsplash.com/cpTecdXH3q8/1305x700/ 1305w,
            https://source.unsplash.com/cpTecdXH3q8/1569x700/ 1569w,
            https://source.unsplash.com/cpTecdXH3q8/1805x700/ 1805w,
            https://source.unsplash.com/cpTecdXH3q8/2038x700/ 2038w"
        src="https://source.unsplash.com/cpTecdXH3q8/1805x700/"
        alt="the awesome building">
</div>

<div class="use-content">
    <h2 class="use-content__headline">How it works</h2>
    <ul class="use-content__list">
        <li>Using <pre>srcset</pre> instead of divs</li>
        <li>Using <pre>object-fit: [type];</pre> so the image can act as <pre>background-image</pre></li>
        <li>Polyfill is a script that checkes if <pre>object-fit</pre> is supported, if not, it will take the image and place it on its parent as <pre>background-image</pre> with the same cover type as the image</li>
    </ul>
</div>

3.
3.a: Use srcset on image, link
3.b: Use picture, link

Answer 2

You need to give height:100%; for image like mentioned below,

html, body, .miracle {
    height: 100%;
}

if you check in this reference example they give us an example so you can check link

Example