Global background-image settings

[agerlach]

Howdy. I would like to set a background-image with background-size: contain for all slides in a RevealJS presentation. Is this currently supported?

Setting

format:
  revealjs:
    background-image: "assets/myimage.png"
    background-size: contain 
...

includes the image as a background but it is much larger than the slide and appears to be background-size=100%

Thanks

[mcanouil]

It should work.
At least as per the example in https://quarto.org/docs/presentations/revealjs/index.html#image-backgrounds

The default for background-size is cover.

[agerlach]

It does work as shown when specified for an individual slide but does not work when specified in the format header as shown in op.

…

On Wed, Jul 6, 2022 at 6:18 PM Mickaël Canouil ***@***.***> wrote: It should work. At least as per the example in https://quarto.org/docs/presentations/revealjs/index.html#image-backgrounds But — Reply to this email directly, view it on GitHub <#1307 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAESK7P7EE57PK3KEVTVA2DVSYA3DANCNFSM523EP2DQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[cderv]

I believe the only global option for revealjs are the parallax-* ones: https://quarto.org/docs/reference/formats/presentations/revealjs.html#media

format:
  revealjs:
    background-image: "assets/myimage.png"
    parallax-background-size: contain 

background-size is not among global option you can set for revealjs and background-image as a global option is just an alias for parallax-background-image that Pandoc knows how to handle because background-image is also used on other slide format (beamer or pptx) - (see in template

If parallax is not what you need, you can always use a Lua filter to to apply some classes and attributes to all element of your content, like the slide header.

function Header (el)
  -- I am using level 2 header for slides in the markdown below
  if el.level == 2 then
    el.attributes['background-image'] = 'https://revealjs.com/images/logo/reveal-black-text.svg'
    el.attributes['background-size'] = 'contain'
  end
  return el
end

---
title: "Untitled"
format: 
  revealjs: 
    filters: 
      - filter.lua
---

## Slide 1

Test

## Slide 2

Test

Hope it helps

[agerlach]

Thanks for teaching a man to fish 🎣