如何使div背景图像响应 [英] how to make div background image responsive

问题描述

如何让这张图片回应

：

HTML：

 < section id =firstclass =storydata-speed =8data-type =background> 
< div class =smashinglogoid =welcomeimgdata-type =spritedata-offsetY =100data-Xposition =50％data-speed = -  2>< ; / div> 
< / section> 
  

CSS：

 code> #first .smashinglogo {background：url（../ images / logo1.png）50％100px no-repeat fixed;} 
  

解决方案

使用 background-size 属性值 100

  #first .smashinglogo {
 background-size：100％auto; 
} 
  

希望这有帮助。

PS：根据上述代码，您可以移除固定并添加 100％ / code>来实现输出。

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

解决方案

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.

这篇关于如何使div背景图像响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！