Repeat background only on mobile devices

Support
#1

Hi i need a help here,
i have some text on white color, so web site on mobile is not showing content. My idea is to repeat background only on mobile devices.

http://criarvalor.pt/novo/en/our-services/

#2

Hi There,

Please add this custom CSS under Customizer > Custom > Global CSS:

@media (max-width: 767px){
    body:not(.home) #top {
        background-repeat-y: repeat;
    }
}

Let us know how it goes!

#3

Hi thai,
no it´s not working.

#4

Hello there,

Please add the CSS code below to X > Launch > Options > CSS

@media (max-width: 767px){
   .page-id-17 .site {
        background-repeat-y: repeat;
    }
}

Let us know if that solves the issue.

Thanks.

#5

Hi Bappi, thank you,
but unfortunately is not working.
I forgot to say that i have a costum css on the page with two backgrounds:

.site{
background-image: url(http://criarvalor.pt/novo/wp-content/uploads/2017/11/Silhouette-Sketch-Grey.png), url(http://criarvalor.pt/novo/wp-content/uploads/2017/11/Grey-Brushtroke.png);
background-size: 1188px 192px, 1060px 457px;
background-position: center 490px, center 240px; margin: 0px; padding: 10px;
background-repeat: no-repeat, no-repeat;
object-fit: cover, cover;
}

#6

Hi there,

Can you please provide your admin login information in a secured note so that we can test?

Best regards.

#7

Yes, Bappi.

#8

Hi there,

Please try this:

@media (max-width: 767px){
    .site {
        background-repeat: repeat, repeat !important;
    }
}

Hope this helps.

#9

Yessss Jade it works, thanks a lot, but i need a small adjust, there is a part of text on white background.

#10

Hi There,

The most practical solution would choose to hide this section on smaller screen widths and create a new section just for smaller screen widths.

If you are using a classic section, you will find this option at the very bottom.

You can select to hide this section on tablets and mobile.

If you are in the v2 section you will find the hide based on screen width on the customize tab.

You can then create a section which you will hide on desktop and laptops and create it specifically for mobile.

Hope it helps

#11

Thanks Joao, but is not possible to center/resize background only on mobile, maybe this solution would solve.

#12

Hi,

Please update the code provided by Jade with following:

@media (max-width: 767px){
    .site {
        background-repeat: repeat, repeat !important;
        background-position: center;
    }
}

Let us know how it goes.

Bests,

#13

Thank you Bappi it´s better.

#14

Glad to hear it.

Cheers!

#15

Joao, is possible to define other background just to mobile?

#16

Hi,

Yes, it is possible. Simply replace the background image url and put it under the media query CSS. It should be something like that:

@media (max-width: 767px){
    .site {
        background-image: url(MOBILE IMAGE URL HERE);
        background-repeat: repeat, repeat !important;
        background-position: center;
    }
}

Hope that helps.

Thanks.

1 Like
#17

Thanks Bappi, this option will work.

#18

Our pleasure! we’re happy to assist you with this today.

Cheers,

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.