BoldGrid offers several themes with a fixed full-page background Image. However, because all of the available BoldGrid themes are heavily customizable, you may notice a blocked background image or covered up by other page elements. If you’ve decided to delete your Call to Action widget, you’ll notice that a large part of your background image is no longer shown. In this tutorial, we’ll walk you through the steps to modify your CSS so you can show your website visitors more of your background image.

DicedFor this example, we’re using a fresh installation of the Diced theme. You may have noticed this theme comes with a Call to Action widget.

Blocked imageIf you delete this widget, the site content below rises up and covers the background image.

Follow along with the steps below to see how you can edit your theme’s CSS file to bring back your background image:

Editing the CSS File

To move the elements on your page and reveal your background image, you will need to edit the theme’s stylesheet. Instead of editing this file directly, you can safely add code to it through the BoldGrid customizer.

  1. Click AdvancedWhile in the customizer, click Advanced.
  2. Custom JS & CSSChoose Custom JS & CSS.
  3. Open EditorUnder Custom Theme CSS click Open Editor
  4.  Add codeAdd the following code: .entry-content {margin-top: 600px;}

Background image visibleThe margin-top code adds margin space above your site content to reveal your image. We set the margin at 600 pixels of space (600px), but you can adjust this to add more space. 800pxwill give you more space and show you 800 pixels worth of your background image. You can adjust this number to meet your individual needs.

Fixing a Blocked Background Image

This is one specific example of how to add this code in a particular theme (Diced). The applicable code may vary depending on which them you are using.