Skip to main content

[WP] How to change background of slider

You can change background of RoyalSlider via CSS or by changing skin in the general options. Styles below should be added to any CSS file on the page with slider, for example in style.css or "Custom CSS" option of your theme.

To change background for all sliders:

.royalSlider,
.royalSlider .rsOverflow,
.royalSlider .rsSlide,
.royalSlider .rsVideoFrameHolder,
.royalSlider .rsThumbs {
background: red !important;
}

To change background of specific slider:

(instead of 123 put ID of your slider)
#new-royalslider-123,
#new-royalslider-123 .rsOverflow,
#new-royalslider-123 .rsSlide,
#new-royalslider-123 .rsVideoFrameHolder,
#new-royalslider-123 .rsThumbs {
background: red !important;
}

As a third option, you may create custom slider skin and apply background in it.

If you wish to remove the background, set it to none, but please note that if you use "Fade" transition - slides must have a non-transparent background because opacity of one slide only is animating.