CODEWITHSUNDEEP
wordpressrevolution-slider
yariv bar
yariv bar

Reputation: 976

Slider revolution responsive background-size value

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

Upvotes: 5

Views: 18404

Answers (1)

Lucas
Lucas

Reputation: 1246

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.

Upvotes: 8

Related Questions