html - how to make div background image responsive

Question

How to make this image responsive

HTML:

<section id="first" class="story" data-speed="8" data-type="background">
    <div class="smashinglogo" id="welcomeimg" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
</section>

CSS:

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

Answer 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.