Known Theme CSS Modifications

This article will list CSS styles and other code fixes that you can add to your site if your background image is not showing up correctly. Please note that these CSS styles have been tested on the theme listed, but the changes listed may not work in all cases depending on:

  • Customizations to the theme's styles, or other options that may have been selected during the theme's setup.
  • Certain elements added by plugins are not covered here.
  • The changes listed are site-wide changes. If you are only using a background image on certain pages, you may not want these styles applied to all pages.

This list is far from complete, since not all themes require any changes at all. If you do not see your theme listed and you are still having trouble getting your background image to show up, please reach out to support as we can usually find the solution for you fairly quickly.

The CSS styles can be added to one of several places. Note you should only add the style to one of the following locations:

  • Your site's Appearance > Customize > Additional CSS section.
  • Your child theme's style.css file.
    • If you do not know what a child theme is or how to create one, please see this article.
  • Your theme's CSS editor if it has one.
  • A page builder's CSS editor if you are using one that has a CSS editor built in.

Twenty Twenty

There are a couple options. Pick the one that works best for your site 

// Paragraphs in their own separate white block to add contrast with darker background images
.entry-content p {
	background-color: #ffffff;
	padding: 10px;
}
// Comments section in white for visibility on darker backgrounds
.comments-wrapper.section-inner {
    background-color: #ffffff;
}
OR 
// Paragraphs all in one solid white block, centered with max width the same as the theme's settings
.entry-content {
	background-color: #ffffff;
	padding: 10px;
	max-width: 58rem;
	margin-left: auto;
	margin-right: auto;
}
// Comments section in white for visibility on darker backgrounds
.comments-wrapper.section-inner {
    background-color: #ffffff;
}

Twenty Nineteen

// Add a white background to content areas to give contrast to text on a dark background
header#masthead,
header.entry-header,
.entry-content,
footer.entry-footer,
div#comments,
footer#colophon {
    background-color: #ffffff;
}

Twenty Seventeen

// Remove theme's background
.site-content-contain {
    background: none;
}
// Give the site content and the footer a white background so text is visible against darker backgrounds
.site-content .wrap,
footer#colophon {
    background-color: #ffffff;
}

Salient

body.material #slide-out-widget-area-bg.slide-out-from-right, .material .ocm-effect-wrap {
    background: none;
}
.container.main-content {
    background: #ffffff;
}

Donovan 

body {
    pointer-events: none;
}
a.skip-link.screen-reader-text,
header,
#content,
#footer,
.cli-modal,
.cli-modal-backdrop,
footer,
.backstretch-item a {
    pointer-events: auto;
}

Edison 

.animsition {
    background: none;
}

Imagely Chic 

.site-container {
    background: none;
}

Highend 

#header-inner-bg {
    background-color: transparent;
}

#main-wrapper.hb-stretched-layout {
  background: unset;
}

#header-inner-bg {
  border-bottom-color: none;
}

#main-wrapper,#main-wrapper.hb-stretched-layout,#main-wrapper.hb-boxed-layout {
  background-color: unset;
}

Neve 

.main {
    background: none;
}

Stratford 

div#st-content-wrapper {
    background: none !important;
}
/* Text on the page will be hard to read without adding a background color back to the text area. The code below will add the color back on that section. */
article {
    background: #eded76;
}

Divi Extra

When a background image is assigned to a page or post the Divi Page Builder in the back end attempts to load code from Full Screen Background Images that is meant to be loaded on the front end of your site. This can cause an error that prevents the page builder from loading. The fix for this is to disable the Full Screen Background Images code while viewing the page builder.

The following code should be added to your theme's functions.php file or to a custom plugin. 

function fsbi_divi_builder_check() {
	if ( '1' === et_()->array_get( $_GET, 'et_bfb', '0' ) ) {
		remove_action( 'wp_enqueue_scripts', 'fsb_pro_display_image' );
	}
}
add_action( 'init', 'fsbi_divi_builder_check' );