Section background image opacity on mobile view

Hi there,

Any chance you can link us to the site? Just want to see what's the best solution :)

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.

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’);
    }
}

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

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.

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.

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

Glad you found a solution.