Question

我有一个网站，背景图片几乎和我希望在移动设备上使用时一样，但是对于台式机，我似乎无法使用@media查询来修改它们。

我的CSS是：

body.page-id-6166 { 
  background-image: url(https://adsler.co.uk/wp-content/uploads/2019/04/FlyerMaker_22042019_085055.png);    
  background-repeat: repeat;
  background-size: cover;
}

显然涵盖了移动设备和台式机，并且可以正常工作

但是当我尝试：

@media (max-width: 1920px) and (min-width: 768px) {
  body.page-id-6166 { 
    background-image: url(https://adsler.co.uk/wp-content/uploads/2019/04/FlyerMaker_22042019_085055.png);  
    background-repeat: repeat;
  }
}

什么都没发生。

甚至都用important尝试过，这根本不受欢迎。

进一步澄清。它们是同一张图像，但是由于风景/人像等原因，并且由于某种原因它会在桌面中自动放大，因此您只能看到一部分（桌面）。因此，在移动设备上，原始图片（整个图片）x 2.在桌面上，您只能看到一个图片，而只能看到该图片的一部分。这就是为什么我想要该@media查询。您可以在https://adsler.co.uk/dating/或https://adsler.co.uk/jobs/中看到一个示例，该示例是同一张图片，但是台式机只选择了其中一部分，似乎将其炸掉了。

Answer 1

您的问题是您的网站https://adsler.co.uk/dating/上的代码重复了。

您有

@media (max-width: 1920px) and (min-width: 768px) {
  body.page-id-6166 { 
    background-image:  url('https://adsler.co.uk/wp-content/uploads/2019/04/FlyerMaker_22042019_085055.png');       
    background-repeat: repeat;
    background-size: cover;
   }
}

但是您还有以下内容没有媒体查询，这使得上面的媒体查询代码无用。

body.page-id-6166 { 
    background-image: url(https://adsler.co.uk/wp-content/uploads/2019/04/FlyerMaker_22042019_085055.png);  
    background-repeat: repeat;
    background-size: cover;
}

Answer 2

您的代码工作正常，请检查屏幕尺寸在768px至1920px之间：

@media (max-width: 1920px) and (min-width: 768px) {
  body.page-id-6166 { 
    background-image:  url('https://adsler.co.uk/wp-content/uploads/2019/04/FlyerMaker_22042019_085055.png');       
    background-repeat: repeat;
    background-size: cover;
   }
}

<body class="page-id-6166">


</body>

Answer 3

所以我添加了background-size: contain;

@media (max-width: 1920px) and (min-width: 786px) {body.page-id-1645 { background-image: url( https://adsler.co.uk/wp-content/uploads/2019/04/FlyerMaker_24042019_164029.png); background-repeat: repeat; background-size: contain;}}

与background-repeat: repeat一起使用时，这看起来很棒！

（根据我的样式）

仍然不完全像移动设备，但可能会更好.....

谢谢。

如何更改桌面的背景图片（@media）

3 个答案: