winzer/elwig-www
2
0
Fork 0
Code Issues Pull Requests Activity

Fix background images for mobile devices

Browse Source
This commit is contained in:
Lorenz Stechauner
2024-05-16 20:45:30 +02:00
parent 10025555a4
commit e6ccd01d44
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
www/index.xhtml
View File

@ -54,7 +54,7 @@
</p> </p>
</section> </section>
<section class="picture-1"/> <section class="picture-1 background"/>
<section class="clients"> <section class="clients">
<span id="genossenschaften"/> <span id="genossenschaften"/>
@ -64,7 +64,7 @@
</p> </p>
</section> </section>
<section class="picture-2"/> <section class="picture-2 background"/>
</main> </main>
<footer> <footer>

23
www/res/style.css
View File

@ -69,25 +69,36 @@ table a {
color: var(--main-color); color: var(--main-color);
} }
main .background {
background-image: var(--img);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
@media screen and (max-width: 1024px) {
main .background {
background-attachment: unset;
}
}
main .home { main .home {
height: 100vh; height: 100vh;
background: url("/res/images/Italien-1.jpg") no-repeat bottom center fixed; --img: url("/res/images/Italien-1.jpg");
background-size: cover;
} }
main .picture-1 { main .picture-1 {
width: 100%; width: 100%;
margin: 0; margin: 0;
background: url("/res/images/Italien-2.jpg") no-repeat bottom center fixed; --img: url("/res/images/Italien-2.jpg");
background-size: cover;
height: 24em; height: 24em;
} }
main .picture-2 { main .picture-2 {
width: 100%; width: 100%;
margin: 0; margin: 0;
background: url("/res/images/Italien-3.jpg") no-repeat bottom center fixed; --img: url("/res/images/Italien-3.jpg");
background-size: cover;
height: 24em; height: 24em;
} }