Customizer: How to Use the Background Tab | BoldGrid
If you have any questions after reading this article, please be sure to post a comment at the bottom of the page. We're more than happy to help!

 
The background tab inside of the Customizer within BoldGrid allows you to modify the background of the BoldGrid theme you are using. This allows you to customize the look and feel of your website and make it your own. Often times, BoldGrid users will want to use specific colors to create a “branding” effect for their business.

  1. Log into the BoldGrid Dashboard.
  2. Click Customize in the left-hand menu pane.
  3. Click the Background tab.BoldGrid Background Menu Highlight
  4. Explore the left-hand panel to make your desired changes. The menu option scrolls through all of the background patterns and then to the background image section as per the second part of the image at right. 
    OptionDescription
    ImageClick this button to use an image for your website background.
    Pattern & ColorSelect this button to choose a pattern, or color as the background, instead of an image.
    Background ImageThis section gives you options to Remove or Change your background image.
    Background EffectsHere you can choose if you want the background image to be Fixed, Scroll, or use a Parallax effect.
    Background Image SizeSelect how you want the background image size to display. Options are Cover Page, Scaled to Fit, Full Width, Full Height, Default, or Do Not resize.
    Horizontal Background PositionUse the available slider to move the background image Left, or Right.
    Vertical Background PositionUse the available slider to move the background image Up, or Down
    Repeat Background ImageCheck to enable or disable the background image to repeat or not.
  5. After you make the changes you want (and preview them live in the preview pane) click the Save & Publish button.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

2 thoughts on “Customizer: How to Use the Background Tab

  1. Where do I find a definition of the Background Effects and Background Image Size options so I understand exactly what they do?

    • Hi Peggy, thank you for your question!

      The Scroll background effect means that your background image will move along with the rest of your page content as your scroll down the page. Scroll far enough and eventually the image will disappear completely from view. The Fixed background property tells the image to stay in one place, and as you scroll down your other elements will appear to slide over the background image. Parallax requires a slightly more in-depth explanation, but it is kind of a mix between the Scroll and Fixed effects. Background images with the Parallax setting will behave like Fixed ones in that page content will appear to slide over them, but they will also have a slight scrolling effect of their own that moves slower than the other page elements. Using Parallax creates the illusion of depth in an otherwise flat landscape.

      The Cover Page background image size expands the background image to cover the entire vertical and horizontal width of your website while maintaining the original aspect ratio and crops any parts of the image that appear off screen. It is unlikely that all parts of the image will be visible at single time when using this option, but it is the only one that ensures users will never unstyled areas in your background.

      The Scale to Fit option assigns the ‘contain’ property to the background which scales the image as much as possible without cropping or stretching. The image will never display larger than the maximum width or height of your website, but there is a chance that there will be blank spots in your image coverage unless the original image has the same aspect ratio as the device that loads your website.

      Full Width and Full Height will each stretch the image in the specified direction, while Default ensures that your image displays without any sizing adjustment.

      I hope that helps explain the background options and let us know if you have any other questions!

Leave a Reply

Your email address will not be published. Required fields are marked *