Last active
May 17, 2024 06:07
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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