bachir/drupal-erable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout des images bg sur les bords

Browse Source
This commit is contained in:
Valentin Le Moign
2026-05-29 19:15:43 +02:00
parent 1956952a2a
commit a4cc0ef538
38 changed files with 212 additions and 1666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
web/themes/erabletheme/css/styles.css
View File

@@ -82,7 +82,6 @@ body .layout-container footer {
z-index: 0;
}
body .layout-container #background {
display: none;
z-index: -1;
}
@@ -875,138 +874,105 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
}
#background {
height: 98%;
position: absolute;
inset: 0;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
#background img {
position: absolute;
z-index: -1;
pointer-events: none;
}
#background > div {
#background .decor-tile {
position: relative;
height: 80vh;
width: 100%;
height: 220vh;
}
#background #bg-top {
/* #bg-1 {
top: 5vh;
left: 0;
} */
/* #bg-4 {
top: 18vh;
right: -45vw;
} */
}
#background #bg-top #bg-3 {
top: 13vh;
left: -10vw;
width: 20vw;
z-index: 1;
}
@media screen and (min-width: 1080px) {
#background #bg-top #bg-3 {
width: auto;
z-index: -1;
}
}
@media screen and (min-width: 1600px) {
#background #bg-top #bg-3 {
width: 22vw;
}
}
#background #bg-top #bg-2 {
top: 8vh;
left: -28vw;
}
@media screen and (min-width: 1080px) {
#background #bg-top #bg-2 {
transform: rotate(1deg);
}
}
@media screen and (min-width: 1600px) {
#background #bg-top #bg-2 {
left: -5vw;
top: 9vh;
}
}
#background #bg-top #bg-5 {
width: 20vw;
top: 5vh;
right: -10vw;
z-index: 1;
}
@media screen and (min-width: 1080px) {
#background #bg-top #bg-5 {
z-index: -1;
}
}
@media screen and (min-width: 1600px) {
#background #bg-top #bg-5 {
width: 27vw;
}
}
#background #bg-middle {
/* #bg-8 {
width: 80vw;
top: 45vh;
left: -40vw;
} */
}
#background #bg-middle #bg-6 {
top: 5vh;
right: -5vw;
}
#background #bg-middle #bg-7 {
width: 85vw;
top: 10vh;
right: 0vw;
}
#background #bg-middle #bg-12 {
width: 105vw;
left: -5vw;
top: 30vh;
}
#background #bg-bottom {
bottom: 0;
#background .decor-tile img {
position: absolute;
pointer-events: none;
width: auto;
}
#background #bg-bottom #bg-11 {
#background .decor-tile .decor-left {
left: 0;
}
@media screen and (min-width: 1080px) {
#background #bg-bottom #bg-11 {
left: 50vw;
bottom: 70vh;
}
#background .decor-tile .decor-right {
right: 0;
}
#background #bg-bottom #bg-10 {
width: 110vw;
left: 5vw;
bottom: 0;
#background .decor-tile .decor-left-1 {
top: 2%;
height: 20vh;
}
@media screen and (min-width: 1080px) {
#background #bg-bottom #bg-10 {
left: 0;
bottom: 20vh;
}
#background .decor-tile .decor-left-2 {
top: 18%;
height: 32vh;
}
#background #bg-bottom #bg-4 {
transform: scaleX(-1);
left: -45vw;
bottom: 5vh;
#background .decor-tile .decor-left-3 {
top: 38%;
height: 42vh;
}
@media screen and (min-width: 760px) {
#background #bg-bottom #bg-4 {
bottom: 150vhvh;
}
#background .decor-tile .decor-left-4 {
top: 58%;
height: 12vh;
}
@media screen and (min-width: 1080px) {
#background #bg-bottom #bg-4 {
bottom: -8vh;
}
#background .decor-tile .decor-left-5 {
top: 70%;
height: 22vh;
}
#background .decor-tile .decor-left_6,
#background .decor-tile .decor-left-6 {
top: 88%;
height: 10vh;
}
#background .decor-tile .decor-right-1 {
top: 1%;
height: 22vh;
}
#background .decor-tile .decor-right-2 {
top: 10%;
height: 38vh;
}
#background .decor-tile .decor-right-3 {
top: 18%;
height: 18vh;
}
#background .decor-tile .decor-right-4 {
top: 26%;
height: 12vh;
}
#background .decor-tile .decor-right-5 {
top: 34%;
height: 26vh;
}
#background .decor-tile .decor-right-6 {
top: 42%;
height: 8vh;
}
#background .decor-tile .decor-right-7 {
top: 48%;
height: 10vh;
}
#background .decor-tile .decor-right-8 {
top: 55%;
height: 8vh;
}
#background .decor-tile .decor-right-9 {
top: 62%;
height: 18vh;
}
#background .decor-tile .decor-right-10 {
top: 72%;
height: 12vh;
}
#background .decor-tile .decor-right-11 {
top: 78%;
height: 20vh;
}
#background .decor-tile .decor-right-12 {
top: 86%;
height: 16vh;
}
#background .decor-tile .decor-right-13 {
top: 92%;
height: 22vh;
}
/* PAGES */