Question

我刚刚建立了一个WordPress网站，并希望将滑块图像设置为全屏显示。我目前已经设置了Slider Revolution和WPBakery Page Builder插件。

所有设置都只是使图像与顶部菜单不重叠。

我希望该图片在此网站https://www.rentmycaravan.com/

上以全屏显示

我的网站是www.hiremytent.com。

谢谢。

Answer 1

您可以使用css进行操作，如下所示。只要确保将“ image.jpg”替换为背景图片即可。

body{height:100%;
   width:100%;
   background-image:url(image.jpg);/*your background image*/  
   background-repeat:no-repeat;/*we want to have one single image not a repeated one*/  
   background-size:cover;/*this sets the image to fullscreen covering the whole screen*/  
   /*css hack for ie*/     
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
   -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}

您也可以使用一些jQuery插件来做到这一点：

Answer 2

尝试一下：

body{height:100%;
   width:100%;
   background-image:url(test-image-camping.jpg);/*your background image*/  
   background-repeat:no-repeat;/*we want to have one single image not a repeated one*/  
   background-size:cover;/*this sets the image to fullscreen covering the whole screen*/  
   /*css hack for ie*/     
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.test-image-camping.jpg',sizingMethod='scale');
   -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test-image-camping.jpg',sizingMethod='scale')";
}

或者，您也可以将图像设置为底层：

<img src='test-image-camping.jpg' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>

如何将图像增加到全屏？

2 个答案: