Welcome to Modern Slider Background
Fullscreen background has become very popular in web design lately. Fullscreen images used as backgrounds have an amazing visual impact, but did you know that you can use video background in exactly the same way?
| Slider Background Demo - 1 | Slider Background Demo - 2 | Slider Background Demo - 3 | Slider Background Demo - 4 | Slider Background Demo - 5 |
Fullscreen HTML5 Page Background Slider
Creating a Fullscreen HTML5 Slider Background with CSS
Slider is probably the number one way to draw attention. A good video background can easily make people stop and take notice, increasing the time they spend on the site. This extended time on the site could potentially lead to more interaction with other content on the page.
In fact it can be done using only CSS only. CSS background and background-image properties only accept colours, gradients, bitmaps & SVG as values.
Video backgrounds are something we see more and more all over the web and can be a great way to improve your website’s look, making it more appealing to your visitors. The idea is to have the video covering all the background like an image. The problem is that is not possible to use CSS rules like background-size: cover because this rule only accepts images, so we’ll have to find another way.
We create a simple HTML5 video Click here
element with loop, autoplay and muted attributes and place it inside a container element. The image used in a poster attribute will be replaced by the first frame of the video when it loads. Therefore it’s good practice to use the first frame of a video for a poster image.
Pulling off the video background effect is pretty simple Click here
element with loop, autoplay and muted attributes and place it inside a container element. The image used in a poster attribute will be replaced by the first frame of the video when it loads. Therefore it’s good practice to use the first frame of a video for a poster image.
>