如何在我的网站上将.webm文件设置为背景？

Question

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.

Answer 1

Sounds like you got a relatively problem.

Try:

background-image: url("./img/itry.webm");

I recommend using HTML5 video tag however.

<video loop autoplay>
    <source src="video/itry.webm" type="video/webm">
</video>

Answer 2

通过将文件格式更改为.mp4来解决，我认为.webm文件仍然存在与浏览器的兼容性问题，如此处所示浏览器兼容性测试