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

问题

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.

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

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

回答3:

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

来源：https://stackoverflow.com/questions/25515553/how-to-make-css-background-image-responsive

标签

html

css

css3

responsive-design

background-image