Backgrounds Styling (Theme Options > Main Content > Layout & Backgrounds)

Updated on December 20, 2018

Theme Options is the main section of Jupiter, which you can do your global settings for your website. You can access Theme Options from top left side of your dashboard. We are going to describe about Backgrounds Styling options available under Main Content > Layout & Backgrounds section of Theme Options in this article.


Backgrounds Styling

1Choose between boxed and full width layout.  

Use this option to set the main layout of the website. Available options are:

  1. Boxed Layout
  2. Full Width Layout
2Boxed Layout Outer Shadow Size.  

Use this option to set the shadow distance of boxed layout. Set the value to 0 if you don’t want your website box have a shadow.

3Boxed Layout Outer Shadow Intensity.  

Use this option to set the shadow intensity of boxed layout. Set the value to 0 if you don’t want your website box have a shadow.

Background color & texture

Use options below to set background properties for Header, Page Title, Page, Body or Footer area.

4Background color.  

Use this option to set the background color of the website.

5Background Repeat.  

Use this option to set how you want the background image repeat. Available options are:

  1. No Repeat
  2. Repeat
  3. Repeat Vertically
  4. Repeat Horizontally
6Background Attachment.  

Use this option to set how you want the background image attached to the page. Available options are:

  1. Scroll
  2. Fixed
7Background Position.  

Use this option to set the position of background image. Available options are:

  1. Top Right
  2. Top Center
  3. Top Left
  4. Center Right
  5. Center Center
  6. Center Left
  7. Bottom Right
  8. Bottom Center
  9. Bottom Left
8Cover whole background.  

Use this option to force background image take up the whole container. Browser may cut off portions of the image to fit in different window sizes.

If you want to add the full background image to the whole container including header, page content, footer, you need use custom css code and make sure background color/image setting is left blank in the Background color & Texture section.

1From the WordPress left menu, go to Jupiter > Theme Options > Advanced > Custom CSS.
2Add this css code in the Custom CSS section:

#mk-boxed-layout {
    background-image: url(https://jupiter.artbees.net/wp-content/uploads/2017/09/main-demo-bg-05.jpg);
}

Replace image URL with yours that you uploaded in the Media Library.


Did this answer your question?