1

I'm trying to display a gif from giphy.com as a background to a slide in Revealjs (compiles from Quarto document). Below is my code

## A bad workman? {background-video = "https://media.giphy.com/media/FaIDQOgN69FXq/giphy.gif"}

The background video does not play. Do I need to ensure that all video is local? I thought that it was possibly to pull in videos from sites like giphy, but I cannot seem to get this to work in Quarto. Thanks.

Nick Riches
  • 317
  • 2
  • 13

1 Answers1

2

Yes, online source also works. But there are two things to note,

  1. You need to use background-image for rendering gif file.

  2. As I have also said here, do not use space on either side of equal sign (i.e. =) when specifying background attributes. This is true for background-image, background-color or any other Slide background attributes.

---
title: "Untitled"
format: revealjs
---

## A bad workman? {background-image="https://media.giphy.com/media/FaIDQOgN69FXq/giphy.gif" background-size="contain"}
shafee
  • 15,566
  • 3
  • 19
  • 47
  • Thanks. This works great. I thought I'd tried this, i.e. without spaces, and using "background-image". What I've found is that sometimes preview fails, and I need to kill the process and start all over again. This could also have been the reason why I couldn't get this to work. – Nick Riches Jun 23 '23 at 14:31