Background Images
different ways to include background images
September 22, 2025
Samantha Monty
Chair for Human-Computer Interaction, University of Würzburg

Background Images

Some slides with background image

  1. RevealJS style with data-background-image attribute
  2. decker style with image and title text header
  3. decker style with attribute size=contain
  4. decker style with attribute size=cover
  5. decker style with attributes size, repeat, color
  6. decker style with attributes position, size, repeat, color
  7. decker style with attributes position, size, repeat, color

RevealJs Style

Source

# RevealJs Style {data-background-image="include/06-metal.png"}

Image in Title 1

Source

# Image in Title 1 ![](include/06-metal.png)

Image in Title 1

Source

# Image in Title 1 ![](include/06-metal.png){size="contain"}

Image in Title 1

Source

# Image in Title 1 ![](include/06-metal.png){size="cover"}

Image in Title 2

Source

# Image in Title 2 ![](include/06-metal.png){size="50%" repeat="repeat"}

Image in Title 3

Source

# Image in Title 3 ![](include/06-metal.png){size="50%" repeat="no-repeat" color="red"}

Image in Title 4

Source

# Image in Title 4 ![](include/06-metal.png){size="50%" repeat="no-repeat" position="10px 10px"}

Image in Title 5

Source

# Image in Title 5 ![](include/06-metal.png){size="300%" repeat="no-repeat" position="-600px -300px"}

Otherwise emtpy H1 header