[Resolved] Section background image opacity on mobile view

[Rachael]

Hi, the section background image interfereces with the legibility of the text on the mobile view. But I still want the swirls to show somehow. Is there a way to change the opacity for the section background image on mobile view only? Or, is it better to add it in within a div under the slider and then hide that on the desktop view? Look forward to your help. Thanks.

[Leo]

Hi there,

Any chance you can link us to the site? Just want to see what’s the best solution 🙂

[Rachael]

I used .generate-sections-container {
background-image: url(‘http://www.shakeitupcreative.com/dev/dressroom/wp-content/uploads/2017/07/background-mobile.png’) !important;}
}

in my css for mobile. It’s the same image but with the opacity much lower.

But it puts the image in all of the sections. I only want it in the first section. Any way that can be done?

http://www.shakeitupcreative.com/dev/dressroom/

Thanks.

[Leo]

Try this:

@media (max-width: 768px) {
    #custom-mobile-bg.generate-sections-container {
        background-image: url(‘http://www.shakeitupcreative.com/dev/dressroom/wp-content/uploads/2017/07/background-mobile.png’);
    }
}

[Rachael]

Thanks but no. That takes it out completely. I want it to show in the first section only.

[Leo]

Hmm that’s what that code should do but I don’t see it being added.

One other problem is that the slider in the section doesn’t seem to be responsive.

[Rachael]

The slider is responsive and works fine. I have input that css within the additional css section of the theme but it didn’t work so I put what I had back which does work. But it puts that background image into every section and I only want it in the first section.

[Rachael]

Go it to work by adding in :
div#generate-section-2 {background-image: none !important;}

[Leo]

Glad you found a solution.

[Author]

Posts