Why doesn't my mobile store display the background image?

Store Design
, ,
1

Hi,

can someone help me with my background store. Im having this problem that on my desktop everything works just fine, but when i navigate with my mobile on the store it doesnt show up my background imagine .

Currently i`m using the ORIGIN theme.

I only used this code in assets/base.css :

.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://c0.wallpaperflare.com/preview/704/659/593/brown-makeup-brush-lo.jpg) !important;
background-color: to bottom !important;
background-position: center !important;
background-size: 100% !important;

Thank you .

2

@Linesamaras

Please use this code for mobile

@media (max-width: 767px ) {
  body.gradient {
    background:  url(https://c0.wallpaperflare.com/preview/704/659/593/brown-makeup-brush-lo.jpg) !important;
    background-size: 120% !important;
    background-attachment: inherit !important;
}
}

Thanks!

3

Oh i forgot , sorry

https://glamlight.store/

4

Where do i copy the code ?

5

Please use this code for mobile

@media (max-width: 767px ) {
  body.gradient {
    background:  url(https://c0.wallpaperflare.com/preview/704/659/593/brown-makeup-brush-lo.jpg) !important;
    background-size: 120% !important;
    background-attachment: inherit !important;
}
}
6

@Linesamaras

Please add this code to your assets/base.css bottom of the file.

7

It still doesn`t work . :disappointed_face:

8

mobile.jpeg
mobile.jpeg1080×2400 293 KB

desktop.jpeg
desktop.jpeg1700×2200 199 KB

9

@Linesamaras

closing bracket missing please check the screenshot

GlamLight-bracket.jpg
GlamLight-bracket.jpg1572×822 145 KB

10

Still doesn`t work :disappointed_face:

11

@Linesamaras

again bracket missing problem check screenshot

GlamLight-2.jpg
GlamLight-2.jpg1578×818 149 KB

12

@Linesamaras

again bracket missing problem check screenshot

GlamLight-2.jpg
GlamLight-2.jpg1578×818 149 KB

13

@Linesamaras

find this code and remove in

:root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');

    .gradient {
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://c0.wallpaperflare.com/preview/704/659/593/brown-makeup-brush-lo.jpg) !important;
background-color: to bottom !important;
background-position: center !important;
background-size: 100% !important;
}
}
               
@media (max-width: 767px ) {
  body.gradient {
    background:  url(https://c0.wallpaperflare.com/preview/704/659/593/brown-makeup-brush-lo.jpg) !important;
    background-size: 120% !important;
    background-attachment: inherit !important;
}
}

add this new code

:root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
}
.gradient {
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://c0.wallpaperflare.com/preview/704/659/593/brown-makeup-brush-lo.jpg) !important;
background-color: to bottom !important;
background-position: center !important;
background-size: 100% !important;
}
 
@media (max-width: 767px ) {
  body.gradient {
    background:  url(https://c0.wallpaperflare.com/preview/704/659/593/brown-makeup-brush-lo.jpg) !important;
    background-size: 120% !important;
    background-attachment: inherit !important;
}
}

base.css bottom of file

14

code.jpeg
code.jpeg1700×2200 130 KB

code.jpeg
code.jpeg1700×2200 130 KB

mobile still not working.jpg
mobile still not working.jpg1080×2400 260 KB

15

Still not working

16

@Linesamaras

Please find this code to remove

@media (max-width: 767px ) {
  body.gradient {
    background:  url(https://c0.wallpaperflare.com/preview/704/659/593/brown-makeup-brush-lo.jpg) !important;
    background-size: 120% !important;
    background-attachment: inherit !important;
}
}

Add this code

@media screen and(max-width: 749px ) {
  .gradient {
    background:url(https://c0.wallpaperflare.com/preview/704/659/593/brown-makeup-brush-lo.jpg) !important;
    background-size: 120% !important;
    background-attachment: inherit !important;
}
}
17

@Linesamaras

On the last try, please

add the following code to your layout /theme.liquid before bottom of the file .
18

I`m having the same problem :disappointed_face:

19

Thank you for trying , but it still doesn`t work . I just dont get it why :disappointed_face: