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

23
www/res/style.css
View File

@ -69,25 +69,36 @@ table a {
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 {
height: 100vh;
background: url("/res/images/Italien-1.jpg") no-repeat bottom center fixed;
background-size: cover;
--img: url("/res/images/Italien-1.jpg");
}
main .picture-1 {
width: 100%;
margin: 0;
background: url("/res/images/Italien-2.jpg") no-repeat bottom center fixed;
background-size: cover;
--img: url("/res/images/Italien-2.jpg");
height: 24em;
}
main .picture-2 {
width: 100%;
margin: 0;
background: url("/res/images/Italien-3.jpg") no-repeat bottom center fixed;
background-size: cover;
--img: url("/res/images/Italien-3.jpg");
height: 24em;
}