时间戳

首页 > 解决方案 > 如何将图像增加到全屏？

css - 如何将图像增加到全屏？

问题描述

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

一切都设置好了，图像不与顶部的菜单重叠。

我希望图像在本网站https://www.rentmycaravan.com/上像这样全屏显示

我的网站是www.hiremytent.com。

谢谢你。

标签： csswordpressvisual-composerrevolution-slider

解决方案

您可以使用 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 插件来做到这一点：

推荐阅读