how to make div background image responsive

how to make div background image responsive

How to make this image responsive
HTML:

CSS:
#first .smashinglogo {background: url(../images/logo1.png) 50% 100px no-repeat fixed;}

Solutions/Answers:

Solution 1:

Use background-size property to the value of 100% auto to achieve what you are looking for.

For Instance,

#first .smashinglogo{
   background-size:100% auto;
}

Hope this helps.

PS: As per your code above, you can remove fixed and add 100% auto to achieve the output.

Solution 2:

Try adding background-size:cover

.smashinglogo {background: url(../images/logo1.png)  50% 100px no-repeat fixed;
  background-size: cover;
  height:600px
}

Check this tutorial for detailed article.

Solution 3:

try this :

background-size:100% auto;

or

background-size: cover;

Solution 4:

Instead of fixed Use

max-width:100%;

this will work.

Final Output

.smashinglogo {
  background: url(../images/logo1.png)  50% 100px no-repeat;
  max-width: 100%;
}

Solution 5:

#first .smashinglogo{
 background-image: url(../images/logo1.png);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: 50% 50%;
}

try this, it might work for you.

Solution 6:

I’m just summarising with an answer that helped me along the same lines.

.smashinglogo {
  max-width: 100%;
background-size:100% auto;
}

.smashinglogo {
  max-width: 100%;
background-size:cover;
}

Both the codes above worked really well.

Related:  How to create a responsive image that also scales up in Bootstrap 3

References