How can I set a .webm file as a background on my website?

Issue

Im looking for a way to set a .webm file as a background on my website, but when I put it on my css the file doesnt show.

Im trying to set an animated wallpaper on my website, ive been exporting the file on .gif or .mp4, but the file is too large for a website (20mb) so instead I decided to export the file to .webm (named “itry.webm”)

So, on my CSS file I got this:

position: relative;
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
    box-sizing: border-box;
    background-image: url("img/itry.webm");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */

Instead of displaying the file it displays a white background.

Solution

Solved by changing the format of the file to .mp4, I think .webm files still have compatibility issues with browsers as you can see here Browser Compatibility Test

Answered By – Gabo RM

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published