only show one background image on mobile devices

Hi there

I inserted some css code to the override.css to add 5 background images. 4 of them don't repeat, one does.

Code: Select all

body {
   background-image:    
url(../images/background_comic_left.png),
url(../images/background_comic_right.png),
url(../images/background_comic_left_bottom.png),
url(../images/background_comic_right_bottom.png), 
url(../images/background_tuerkis.png);
   background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
   background-position: 0% 10%, 100% 10%, 0% 100%, 100% 100%, left top;
   color: #3a3637;

I now would like to hide 4 of these images (the ones that don't repeat) on the mobile version. How can I do that? I tried something like this:

Code: Select all

@media (max-width: 640px) {
   #gkBg{
background-image: url(../images/background_tuerkis.png);
background-repeat: repeat;
}
}

But the images still load on mobile devices.
URL: https://stefanscheibler.ch/buochs/
Any advice? Thanks in advance!

Hi

You need to overwrite all of those images same way as it was added:

Code: Select all

body {
   background-image:   
none,
none,
none,
none,
url(../images/background_tuerkis.png);
   background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
   background-position: 0 0, 0 0, 0 0, 0 0, left top;
}


nice tipp! thank you!
I done it like that, if anyone is interested:
bodytag is not needed

Code: Select all

#gkBg{

background-image: url(../images/background_comic_left.png),
url(../images/background_comic_right.png),
url(../images/background_comic_left_bottom.png),
url(../images/background_comic_right_bottom.png),
url(../images/background_tuerkis.png);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
background-position: 0% 10%, 100% 10%, 0% 100%, 100% 100%, left top;
color: #3a3637;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
margin: 0;
min-height: 100%;
padding: 0;
word-wrap: break-word;
}



@media (max-width: 640px) {
#gkBg{

background-image: none,
none,
none,
none,
url(../images/background_tuerkis.png);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
background-position: 0 0, 0 0, 0 0, 0 0, left top;
color: #3a3637;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
margin: 0;
min-height: 100%;
padding: 0;
word-wrap: break-word;
}
}

I have to play now with the widths and probably will add another one!
THANK YOU AGAIN. Do you have a donate button somewhere?

Hi

No we do not Happy I could help.