how to make div background image responsive - html

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.

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

Answer 3

try this :
background-size:100% auto;
or
background-size: cover;

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

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

Answer 6

Making a Responsive image there are many ways.
The Basic rule is use % value instead of pixel value. and second is use #media queries to target the mobile devices and tablets.
Also you can use CSS3 new technique to make the image responsive:
.img-element: {url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
you can read more about Responsive image by clicking on this link.
http://css-tricks.com/which-responsive-images-solution-should-you-use/

Answer 7

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.

Answer 8

If you div background-image disappears when stacked on small devices (typically below 577px in width), then add "min-height:310px;" to your css.