How to make CSS background-image responsive?

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.

If you specify height and width the container can not be responsive - it has a fixed size. You have to use percentages, see the other question — topek, Aug 26 '14 at 21:43
`div` elements have a default height: `0px`. You have to set the height of your element, e.g. to `100vh`. — kelunik, Aug 26 '14 at 21:49
I don't see any clarification of how the duplicate didn't work for you. — showdev, Aug 26 '14 at 21:50
me neither. specially when your div is defining its dimensions here: `height:120px;width:120px;` — Luis Masuelli, Aug 26 '14 at 21:53

score 10 · Accepted Answer · edited Sep 18 '18 at 17:51

10

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%;
}

edited Sep 18 '18 at 17:51

answered Aug 26 '14 at 21:45

spliter

12,321
4
33
36

1

Most probably. But hard to tell outside the context. If the answer did work for you, please don't forget to accept it, not just upvote so that others would get an overview of the working solution ;) – spliter Aug 26 '14 at 21:51
Too fast for me. Didn't even have time to post my answer! HA! – ValleyDigital Aug 26 '14 at 21:51

Luis Masuelli · Answer 2 · 2014-08-26T21:51:40.527

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 */
}

score 0 · Answer 3 · answered Aug 26 '14 at 21:48

In order for responsiveness, you often have to use percentages instead of pixel values. So, if you set the height and width for the element to 100% and set all of its parent elements to the full height and width that you want them (including html and body), the code from the other question should work. Try http://goo.gl/2GrwyR

How to make CSS background-image responsive?

3 Answers3

Linked