Mar 202014
 

Suffusion Skinning Body Background Tutorial shows you how to set up the skinning for the body background, main wrapper and post background and more.

Last Updated: March 1, 2018

Latest News: I have updated the information below.

This tutorial shows you how to edit and customize the main body background of the site. This covers the main body area that is viewed when visitors land in your site.

Suffusion Skinning Body Background Tutorial

Step 1 ) Go to Appearance -> Suffusion Options -> Skinning -> Body Background. See image below.

suffusion-skinning-body-background-admin-panel

Body Background

Step 2 ) The following image Body Background allows you to select from the following options.

  • Theme styles
  • Custom Styles (Remember to select this option if you are using a custom style or image)

suffusion-skinning-body-background-custom-style

Body Background Color

Step 3 ) The following image Body Background Color allows you to change the background color and add a background image. With the background image you can click on Upload Image button.

Note: If you are adding an image, the image path must be absolute. It can be from your own website or from another website or server. If the path is not absolute the image will not show up.

suffusion-skinning-body-background-color

Body Background Image Tiling

Step 4 ) The following image allows you to set up the following options.

Body Background Image Tiling

  • Repeat both horizontally and vertically
  • Repeat horizontally only
  • Repeat vertically only
  • Do not repeat – show background once only

Background Image Scrolling

  • Let the background scroll with the rest of the page
  • Keep the background fixed

suffusion-skinning-body-background-image-tiling

Background Image Position

Step 5 ) The following image allows you to set up the following options.

Background Image Position

  • Top Left
  • Top Center
  • Top Right
  • Center left
  • Middle of the page
  • Center right
  • Bottom left
  • Bottom center
  • Bottom right

suffusion-skinning-body-background-image-scrolling

Remember to click on Save/ Reset button when you complete your settings.

suffusion-skinning-save-reset-button

 

Step 6 ) The following image displays a layout of the different settings on the main landing page. I have added the description to each configured part of the website for you to understand.

Note: The colors are bright and ugly, this was my choice so it would be much easier to distinguish between the different areas. Remember to play around with the colors until you get a desired cosmetic design.

suffusion-skinning-color

I hope the above helps you understand how to manage the main body background.

Note: I have not set up an image on this tutorial. That will be added in another tutorial.

Click on the following URL Skinning Tutorials for more skinning tutorials.

If you have any questions please let me know. I will be updating this from time to time. So keep coming back for the latest.

Enjoy.

More Suffusion Tutorials:

Manuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.