How to make CSS background-image responsive? [duplicate]

Question

Ok, so I came across this solution to making background-image responsive:
Responsive css background images

My apologies for re-posting the question, but literally none of their solutions worked for me.

HTML:

<div id="fourohfour_home"></div>

CSS:

#fourohfour_home {
    background-image:url('image.png');
    height:120px;
    width:120px;
}

How exactly would I make this responsive? e.g. When the width of the page is less than the width of the image it scales correctly.

Answer 1

You simply need to define width and height of #fourohfour_home in order for the background image to know in what container to be contained. Something like:

#fourohfour_home{
    background-image:url('https://www.example.com/img/404_home.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    height: 120px;
    width: 20%;
}

Answer 2

You should use media queries as always, and then set the dimensions for the background:

@media all and (max-width: 639px) and (min-width: 320px) {
    #fourohfour_home {
        background-size: 320px 240px;
    }
}

In this example, I changed the size of an image you gave, for the case that the width is few than 640. if it is greater, I use another resolution:

@media all and (max-width: 799px) and (min-width: 640px) {
    #fourohfour_home {
        background-size: 640px 480px;
    }
}

I could even change the image, if I wanted an image with better resolution:

@media all and (max-width: 799px) and (min-width: 640px) {
    #fourohfour_home {
        background-image: url('my-image-640.png');
        background-size: 640px 480px;
    }
}

Edit this belongs to the same css definition:

/* for default - too short - size */
@media all and (max-width: 319px) {
    #fourohfour_home {
        background-image: url('my-image-very-small.png'); /*in the case you have another image for this resolution - usually you'll never have these sizes as for today*/
        background-size: 200px 150px;
    }
}

@media all and (max-width: 639px) and (min-width: 320px) {
    #fourohfour_home {
        background-image: url('my-image-320.png'); /*in the case you have another image for this resolution*/
        background-size: 320px 240px;
    }
}

@media all and (max-width: 799px) and (min-width: 640px) {
    #fourohfour_home {
        background-image: url('my-image-640.png'); /*in the case you have another image for this resolution*/
        background-size: 640px 480px;
    }
}

@media all and (max-width: 1023px) and (min-width: 800px) {
    #fourohfour_home {
        background-image: url('my-image-800.png'); /*in the case you have another image for this resolution*/
        background-size: 800px 600px;
    }
}

/* this one goes for default images - bigger sizes */
@media all and (min-width: 1024px) {
    #fourohfour_home {
        background-image: url('my-image-1024.png'); /*in the case you have another image for this resolution*/
        background-size: 1024px 768px;
    }
}

/* this will have no @media, so will apply for every resolution */

#fourohfour_home {
    background-repeat:no-repeat;
    background-position:center;
    width: 100%; /* assuming you want to expand your div in a screen-dependent way */
}