WordPress：移动版和桌面版的不同标题图片

我有一个WordPress网站, 在其中使用的标题图片在桌面上效果很好：http：//fortyfourth.co.uk

但是, 在移动设备上, 图像根本无法正常工作。

是否可以仅将自定义标题图片用于移动设备？我对WordPress(以及与此有关的任何编码元素)非常陌生, 因此, 如果可以的话, 如果你能告诉我在何处以及如何添加自定义代码, 那将是很棒的。

谢谢, 瑞安

#1

在网站的移动视图中, 标题图片看起来不错, 但是如果你要在页面中使用其他背景图片, 请使用以下CSS规则：

@media screen and ( max-width: 425px ){ 
  .page-id-155 .ewf-header-image-option{
      background-image: url("http://fortyfourth.co.uk/wp-content/uploads/2018/02/YOUR_NEW_IMAGE_NAME.png") !important;
      max-height: 150px !important;
      background-position: 49% 0px !important;
  }
}

代替此http://fortyfourth.co.uk/wp-content/uploads/2018/02/YOUR_NEW_IMAGE_NAME.png使用新图像的完整URL。

在这一行中, 我们定义了何时更改图像：@media屏幕和(max-width：425px){。 max-width：425px表示宽度小于425px的所有屏幕。你可以根据需要更改宽度。

max-height：150px！重要意思是, 图像高度部分不会超过150像素, 你可以根据需要更改150像素的高度。

关于背景知识, 你可以在这里学习。

代码转到自定义->其他CSS。

#2

我尝试使用CSS完全按照书面规定和几种变体进行了尝试, 但无济于事。

我最终使用了https://wordpress.org/support/topic/setting-a-different-header-image-for-mobile/

我最终不得不重新调整备用图像的大小, 这导致页面上的其余图像被缩放。但是我认为我有解决方案。

我希望这有帮助。