Search code examples
htmlcssresponsive-designbackground-image

How to make CSS background-image responsive?

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.

Solution

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