Add background color to full width easy slider

Hey jenniferh73,

Thank you for the inquiry.

By default, there is no option to apply background color to the slides, but you can achieve this using CSS.

Here’s an example:

Example:

.avia-slideshow li:nth-child(1) {
    background-color: red;
}

.avia-slideshow li:nth-child(2) {
    background-color: blue;
}

This CSS code will apply a red background to the first slide and a blue background to the second slide. You can modify the colors and slide number as per your requirement. You may need to apply a custom css class name or ID to the slideshow element.

// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hi,

Thank you for the update.

You may need to disable the file compression option in the Siteground plugin for the changes to take effect. If you want to set the same background color for all slides, you can use the following CSS code

.avia-slideshow li {
    background: red;
}

Best regards,
Ismael

Hi,
Thank you for your patience, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.home #full_slider_1 {
    background: #000;
}

This will show the background color black until the image in the slider loads.
Or you can use the image of the first slide so you don’t see any delay in the slider loading:

#top.home #full_slider_1 {
    background-image: url(https://bastiontechnologies.com/wp-content/uploads/2023/02/slider-systems-engineering-1000x375-1.jpg);
	background-size: contain;
	background-repeat: no-repeat;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the feedback, for mobile screens try adding this css:

@media only screen and (max-width: 767px) { 
#top.home #main #full_slider_1 {
    background-image: url(https://bastiontechnologies.com/wp-content/uploads/2023/02/slider-systems-engineering-1000x375-1.jpg);
	background-size: cover;
	background-position-x: center;
	background-repeat: no-repeat;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

The CSS modification is not being successfully applied to the slider. To resolve this issue, please follow these steps:

1.) Remove the previous CSS code that you added.
2.) Visit this thread in the forum.
3.) Copy the CSS code directly from the forum or thread.
4.) Paste the code in the Quick CSS field, or in the child theme’s style.css file.
5.) Save the changes and refresh the page to see if the CSS modifications take effect on the slider.

By directly copying the CSS code from the original source, you can ensure that no formatting or syntax issues are introduced. If you encounter any further difficulties or have additional questions, please let us know. We’re here to assist you.

Best regards,
Ismael