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: December 2, 2023

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 on your site.

What you need:

Suffusion Skinning Body Background Tutorial

Step 1 ) Go to Appearance -> Suffusion Options -> Skinning -> Body Background menu as illustrated in the image below to set up the body background.

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 body background.

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:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

 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)

2 × 5 =