Answer a question

I created a slide in my WordPress site and I want the background of the slide to be background-size: cover on desktop and background-size: contain on mobile. I tried to achieve that by using media queries like so:

@media screen and (min-width: 320px) and (max-width: 675px) {   
.tp-bgimg {
    background-color: rgb(6, 6, 6)  !important;
        background-size: contain !important;
   }
}

But there is a time gap between the load of the slide and until the media query takes place, so i first see the background as cover and after a sec or two it changes to contain, any idea how can i solve this issue?

thx

Answers

A better solution for what you need to do is:

1. Go to Slider Settings:
   • In 3, Select a slider type: set it to standard slider and load preset Slideshow Full Width.
   • In 4, Slide Layout: select Full-Width and in Desktop set Layer Grid Size to 1920px x 1080px.
   • Save settings
2. In Slide Editor:
   • Select a background Image with a 1920 x 1080 dimensions
   • In source settings: set background fit to contain, background position to center top.

With this configuration you should see the image fitting in any screen size.