LOL
/
labolyon.fr
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added default background image

This commit is contained in:
EpicKiwi 2023-06-13 17:35:55 +02:00
parent a4eb32d6f0
commit 8ec9333f88
Signed by: epickiwi
GPG Key ID: C4B28FD2729941CE
3 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/style.css
View File

@ -3,9 +3,12 @@ html {
font-weight: 400;
font-size: 1em;
color: #8a8683;
background-color:#000000;
max-width: 100%;
overflow-x: hidden;
background: url("../images/world_network.muted.jpg");
background-color: black;
background-repeat: no-repeat;
background-size: 100% auto;
}
body {
@ -175,7 +178,7 @@ main .toolbar button img[hidden] {
/* background */
#background {
.fullscreen-background {
display: block !important;
position: absolute;
left: 0;
@ -183,17 +186,21 @@ main .toolbar button img[hidden] {
height: 100vh;
overflow: hidden;
z-index: -1;
opacity: 0.3;
width: 100%;
background: black;
}
#background img, #background video {
.fullscreen-background img, .fullscreen-background video {
width: 100%;
height: 100%;
object-fit: cover;
}
#background img {
.fullscreen-background video {
opacity: 0.3;
}
.fullscreen-background img {
position: absolute;
top: 0;
left: 0;
@ -202,12 +209,12 @@ main .toolbar button img[hidden] {
transition: linear 1s opacity;
}
#background img[hidden]{
.fullscreen-background img[hidden]{
display: block;
opacity: 0;
}
#background::after {
.fullscreen-background::after {
content: "";
width: 100%;
height: 25vh;

BIN
images/world_network.muted.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

6
index.html
View File

@ -7,7 +7,7 @@
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<style>
#background {
.fullscreen-background {
display: none;
}
</style>
@ -17,9 +17,9 @@
<body>
<div id="background">
<div class="fullscreen-background">
<video src="/videos/background_sound.mp4" loop poster="images/world_network.jpg" autoplay id="background-video" loading="lazy"></video>
<img src="/images/world_network.jpg" aria-hidden="true" id="background-poster"/>
<img src="/images/world_network.muted.jpg" aria-hidden="true" id="background-poster"/>
</div>
<header id="main-header">