What is the best way to add attribution text to background images in reveal.js?

Question

What is the best way to add attribution text to background images in reveal.js?

I am considering using reveal.js for a series of lectures. I would like to include attribution text in a subtle location (bottom right) for any background images on slides. These images are specified using

<section background-data="url(...)">

within the <slides> section of the HTML source. While I do not have extensive knowledge of JS / CSS, it seems feasible to achieve this without delving too deeply into the reveal.js source code.

I have experimented with placing a transparent image as content in slides and then overlaying text on top, but this method feels cumbersome and fails to properly associate the attribution with the background image it pertains to.

Has anyone successfully solved this issue before?

javascript html css reveal.js

Answer 1

Answer №1

Simply include the following code snippet in your CSS:

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

Then add the line of code below inside your <section>:

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

Additionally, the documentation from GitHub repository recommends using:

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

Instead of:

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

The JavaScript automatically detects if it's a URL, unlike the CSS background property.

Answer 2

Simply include the following code snippet in your CSS:

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

Then add the line of code below inside your <section>:

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

Additionally, the documentation from GitHub repository recommends using:

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

Instead of:

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

The JavaScript automatically detects if it's a URL, unlike the CSS background property.

What is the best way to add attribution text to background images in reveal.js?

Answer №1

Similar questions

Troubleshooting a Custom Pipe Problem in Angular Material Drag and Drop

Tips on eliminating expansion upon button click in header within an Angular application

Passing arrays from child to parent components in VueJS: A comprehensive guide

Chrome method for creating Flexbox columns of equal height

efforts to activate a "click" with the enter key are unsuccessful

In JavaScript, iterate through clickable elements when clicked, but exclude the particular element that was clicked

Could someone review my coding syntax in JavaScript for utilizing indexOf, split, and looping through multiple inputs to paste the splits?

Utilizing Bootstrap and flexbox to create a card: repositioning the image to the left or right

Is there a method to check if my input fields are filled before the bootstrap modal can be triggered in PHP?

Positioning the close button on the top right edge of a Material-UI Dialog: A step-by-step guide

"Identifying the exact number of keys in a JSON object using

Reinitialize the nested property of an object in JavaScript

Every time I try to install create-react-app, I keep encountering a frustrating 'network Socket timeout' error

Ensure the scrollbar is noticeable and personalized solely within a designated div, such as the left side menu

I am having trouble playing an mp4 file from my Android phone as an HTML video

Transmitting data from the front end to the server in React/Shopify for updating API information using a PUT request

Counting the number of tasks associated with Django models relations

changing the visible style of a div element using JavaScript

When an array is prototyped as a member of a JavaScript object, it becomes a shared property among all instances

Access a webpage whose URL has been dynamically assigned using JavaScript