Build Your Own Business Website header image

Lesson 4 – Customizing Backgrounds With Images and Color

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

An important tool in the arsenal of a designer is the CSS background image property.  Background images can be used as backgrounds for pages, to highlight elements of the site and to bring an artistic flair to an otherwise straight forward site.  One example of this is a Thesis theme website I recently finished designing for a client.  Her website is  The background is produced by a small image that is repeated as much as necessary.  This technique can also be employed to create a “layered” effect with one image sitting on top of another.

Another cool way of doing this is to have a large fixed image in the background that doesn’t scroll.   The background is produced by a large image that fills the majority of the screen and sits behind all of the content.

In this lesson we’ll look at how to use tileable background images in the Thesis theme, first as a main background and then second as a way of providing visual interest.  We’ll also look at a trick for adding multiple layers of background images to make interesting graphic effects. Next we’ll look at how to use a fixed, non-scrolling image that will work in both the “Page width” framework and the “Full-width” framework.

Adding a Simple Tiled Background Image

  • Upload images to the appropriate folder on our site
  • Understanding the basic syntax
  • Absolute URLs and Relative URLs
  • Edit the custom.css file

Understanding the background image properties

  • Review the css syntax for background images
  • background-image property
  • background-repeat property
  • background-position property
  • background-attachment property

Adding Additional Semi-Transparent Tiled Background Images

  • Overview of the Thesis HTML structure
  • Add an additional image to the #page
  • Add an additional image to the #content_box
  • Change text colors to match the images

Adding a Fixed, Non-scrolling Background Image

  • Review the syntax for background attachment
  • Add the image to the body
  • Change some of the layered effects
  • Add background image to the heading
  • Final edit of CSS and test

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