2

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.

3 Answers 3

0

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

0

You could try the apng fileformat.

-3

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.