Build Your Own Business Website header image

Customize Skins with Background Images, Colors & Gradients

In this first lesson of our Customize Thesis 2 Like a Pro video tutorial series we look at the various ways to customize a Thesis skin using background images, background color and gradients. We look at both tiling and fixed background images and demonstrate various ways to use them. We also examine how to use semi-transparent colors, in the form of rgba colors to add interest to a site that uses background images.We also discuss strategies for adjusting background images for mobile devices and show how to use gradients in your design.

Understanding Background Images

  • What is a background image?
    • background STYLE
    • NOT HTML – doesn’t interfere with the flow of html
    • it can occupy the same space as other elements
    • Stuff is intended to sit on top of it.
  • Characteristics of a background image
    • It does not take up space
    • It automatically starts in the top left corner of the container
    • Repeats as necessary to fill the container
  • Properties of background images
    • URL
    • Repeat
    • Position
    • Attachment

Add a Tiling Background Image to the Body of a Skin

  • tiles both ways
  • tiles horizontally

Using Different Background Images on Different Pages

Add a Color to the Sidebar with a Tiling Image

Using a Fixed Background Image in a Child Theme

Using Multiple Background Images in the Same HTML Element

Using Semi Transparent Background Colors Over a Background Image

Adjusting Background Images for Mobile Devices

Understanding and Using Gradients

Question and Answer

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one