-1

I have just set up a WordPress website and would like to have the slider image set to full screen. I currently have Slider Revolution and WPBakery Page Builder plugins set up.

Everything is set up just that the image is doesn't overlap the menu at the top.

I'd like the image to show full screen like this one on this website https://www.rentmycaravan.com/

My website is www.hiremytent.com.

Thank You.

Kashif Rafique
  • 1,273
  • 1
  • 12
  • 25
Lee
  • 1

2 Answers2

1

You could do it with css as shown below. Just be sure to replace "image.jpg" with your background image.

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')";
}

You could also do it by using some jQuery plugins:

Bless Anime
  • 56
  • 8
0

Give this a try:

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')";
}

Alternatively, you could also set the image to the bottom layer:

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