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 www.theconfidentmom.com. 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.
- Upload images to the appropriate folder on our site
- Understanding the basic syntax
- Absolute URLs and Relative URLs
- Edit the custom.css file
- Review the css syntax for background images
- background-image property
- background-repeat property
- background-position property
- background-attachment property
- 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
- 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