Skip to content

Instantly share code, notes, and snippets.

@cboulanger
Last active May 17, 2024 06:07
Show Gist options
  • Save cboulanger/7168ef226544cdd0e3b92f540f4b0ef2 to your computer and use it in GitHub Desktop.
Save cboulanger/7168ef226544cdd0e3b92f540f4b0ef2 to your computer and use it in GitHub Desktop.
Hedgedoc CSS to specify a common background image in CSS instead of manually and set an opacity to the background except for the title page
/* set the background image for all pages which have an (empty) <!-- .slide: data-background="" --> marker */
/* create overlay with background image */
.slide-background-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("image-url");
background-size: cover;
background-position: center;
}
/* set the opacity of all backgrounds except on the title page to 30% */
.backgrounds > .slide-background:not(:first-child) .slide-background-content::before {
opacity: 0.3;
}
/* place the a logo on all backgrounds except on the title page */
.backgrounds > .slide-background:not(:first-child) .slide-background-content {
position: relative;
background-image: url('logo-url');
background-position: right 30px bottom 30px;
background-repeat: no-repeat;
background-size: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment