Menu
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;} 
916
Here's how to create responsive background images with CSS: Use the background-size property to encompass the viewport. Give this property a cover value that will tell a browser to scale the background image's heights and width so that they always remain equal to or greater than the height/width of the device viewport.
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
Say you want to put an image or two on a webpage. One way is to use the background-image CSS property. This property applies one or more background images to an element, like a <div> , as the documentation explains.
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.
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
