How to Position a Background Image in Reveal.Js

How to position a background image in reveal.js?

This article helped to find the solution. You can add a style to the html element for the current section using

data-state="something"

and of course you can use that style for tweaking your css. So I used this html:

<section data-background="myImage.jpg" data-state="img-right">
    // content
</section>

and the following css:

html.img-right div.slide-background.present {
    background-position: right;
}

reveal js stretch background image to fit

You can do it manually entering two parameters: data-background-size="800px 600px" for example.

Changing the background-image style in Reveal.js

You have to overwrite the ".backgrounds" class instead ".state-background". Background images are not placed in ".slides". That's why your CSS code wont blur the background images.

.backgrounds {
     -webkit-filter: blur(5px);
     -moz-filter: blur(50px);
     -o-filter: blur(5px);
     -ms-filter: blur(5px);
     filter: blur(5px);
 }

How do I put attribution text on background images in reveal.js?

Just add

.attribution{
    position:absolute;
    bottom:0;
    right:0;
    font-size:0.5em
}

to your css, and

<span class="attribution">Attribution Text</span>

inside your <section>.

---

Also, according to the docs, it should be

data-background="http://example.com/background.png"

and not

background-data="url('http://example.com/background.png')"

The JS detects if it's a url, unlike the CSSbackground property.

Adding a logo at top-left corner for all slides in quarto presentation

If you want to add a logo for all slides (including the title slide) you can do this more easily by adding a logo via logo YAML key and tweaking the CSS property for that logo image.

---
title: "Untitled"
format: 
  revealjs:
    slide-number: true
    logo: placeholder.png
    css: logo.css
---

## Quarto

Quarto enables you to weave together content and executable code into a
finished presentation. To learn more about Quarto presentations see
<https://quarto.org/docs/presentations/>.

logo.css

.reveal .slide-logo {
  display: block;
  position: fixed;
  bottom: unset !important;
  right: unset !important;
  top: 5px;
  left: 12px;
  height: 100px !important;
  width: 100x !important;
  max-width: unset !important;
  max-height: unset !important;
}

---

---

change the height and width css property as you need.

dim the background image in reveal.js

just a typo: no "." in front of html...

This will work and in addition to the blurring, do some dimming and saturation change, which will make the foreground text easier to read:

html.dim .backgrounds {
   -webkit-filter: blur(4px) saturate(.5) brightness(.8);
   -moz-filter: blur(4px) saturate(.7) brightness(.9);
   -o-filter: blur(4px) saturate(.7) brightness(.9);
   -ms-filter: blur(4px) saturate(.7) brightness(.9);
   filter: blur(4px) saturate(.7) brightness(.9);
}

and if you want it to look extra snazzy, you can add an animation:

@-webkit-keyframes blur-animation {
  0% {
    -webkit-filter: blur(0px) ;
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);

  }
  100% {
    -webkit-filter: blur(4px) saturate(.5) brightness(.8);
    -moz-filter: blur(5px) saturate(.7) brightness(.9);
    -o-filter: blur(5px) saturate(.7) brightness(.9);
    -ms-filter: blur(5px)saturate(.7) brightness(.9);
    filter: blur(5px) saturate(.7) brightness(.9);

  }
}

html.background-blur-animation .backgrounds {
   -webkit-animation-name: blur-animation;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-direction: alternate;
   -webkit-animation-timing-function: ease-out;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-delay: 0s;
 }

Reveal absolute image over multiple span backgrounds

I solved it with background-attachment: fixed;

It places the image relative to the viewport so no matter where the span is, its all relative to the same position.

---

Related Topics