How to fix an image on mobile devices?

Question

I integrated a fixed cover image on my website and it works fine: https://stadtpampa.de/4407-2/ Unfortunately it does not work on a mobile device. The image is not responsive and it is not fixed as well. See mobile version

I tried to change the size with @media in the CSS:

@media(max-width: 768px) {
.wp-block-cover {
    min-height: 300px !important;
}}

The size is okay then, but it is not fixed. Could you please help me with the right CSS code to fix the image on mobile devices?

Thanks in advance!

Have you try height: auto; without min-height;? is this what do you want? — Sfili_81, Dec 21 '20 at 13:57
Thanks for your answer. Unfortunately is not what I´m looking for. — Jessen, Dec 21 '20 at 14:05
OK so explain better what do you want, maybe including a working example of your issue — Sfili_81, Dec 21 '20 at 14:08
It's a duplicate of https://stackoverflow.com/questions/41190405/background-attachment-fixed-on-mobile — Hamza Abdaoui, Dec 21 '20 at 14:09
On the desktop version the first image is fixed when I´m scrolling. I also want this on mobile devices. — Jessen, Dec 21 '20 at 14:10

score 0 · Answer 1 · answered Dec 21 '20 at 14:18

Instead of using background-image I'm just using background with short-hand properties. I also removed min-height: 300px !important; since its not necessary.

This should do the trick.

.wp-block-cover {
    background: transparent url(https://stadtpampa.de/wp-content/uploads/2020/12/Schoenower-Heide-Auf-der-Aussichtsplattform.jpg) no-repeat top center;
    background-attachment: fixed;
    background-size: 400px;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

Thank you! I just needed to do a tiny change from `background-attachment` to ´position`and it was the way I liked it. Thanks!! — Jessen, Dec 21 '20 at 17:40

How to fix an image on mobile devices?

1 Answers1