如何根据屏幕大小更改背景图片？ [英] How can I change the a background image, depending on the size of the screen?

问题描述

我使用Zurb基础来处理我的造型，我知道有一个数据交换类，用于根据屏幕大小更改图像，但不确定是否可以使用它来更改div的背景图像？

  background-image：image-url（'img_home_first_bar.jpg'）; 
  

解决方案

您可以通过使用媒体查询 Rahul Desai 的评论。

示例：

HTML：

 < div class =backgroundchange>< / div> 
  

CSS：

  .backgroundchange {
 width：100px; 
 height：100px; 
背景：灰色; 
} 
 @media screen和（min-width：1080px）{
 .backgroundchange {
 background-image：url（backing1.png）; 
背景：蓝色; 
} 
} 
 @media screen and（min-width：487px）and（max-width：1079px）{
 .backgroundchange {
 background-image：url （ backing2.png）; 
背景：绿色; 
 
} 
 @media screen和（max-width：487px）{
 .backgroundchange {
 background-image：url（backing3.png）; 
背景：红色; 
 
 
 
 
 
 
 $ b 
因此，使用这些媒体查询，你可以将CSS设置为取决于窗口大小。
 
 
 
 注意：使结果窗口变得越来越小以查看效果。
 
 
 
  在此试玩  
 
I am using Zurb foundation to handle my styling, I know there is a data interchange class for changing images based on screen size but not sure if you can use it to change the background image of a div?
background-image:image-url('img_home_first_bar.jpg'); 

解决方案
You can do this by using media queries as said in the comments by Rahul Desai.

Example:

HTML:

<div class="backgroundchange"></div>


CSS:

.backgroundchange {
    width: 100px;
    height: 100px;
    background: grey;
}
@media screen and (min-width: 1080px) {
    .backgroundchange {
        background-image: url("backing1.png");
        background: blue;
    }
}
@media screen and (min-width: 487px) and (max-width: 1079px) {
    .backgroundchange {
        background-image: url("backing2.png");
        background: green;
    }
}
@media screen and (max-width: 487px) {
    .backgroundchange {
        background-image: url("backing3.png");
        background: red;
    }
}
So using these media queries you can set the CSS to change depending on what the window size is.

Note: Make the result window bigger and smaller to see the effect.

DEMO HERE

                        
这篇关于如何根据屏幕大小更改背景图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！