Enter your keyword

How to Set A Pattern As Your Website’s Background

How to Set A Pattern As Your Website’s Background

The website for the Viceroy, a hotel in LA. Does the background pattern look familiar?

The website for the Viceroy, a hotel in LA. Does the background pattern look familiar?

Hey, remember what ABDPBT used to look like? When I had a patterned background in grey for the whole page? Ever wondered how I did that? Well, it’s a lot easier than it looks. The other day, I showed you how to change the background color of your Thesis-themed WordPress site.. Changing the background image is done in a very similar way–they both use the background property in CSS. To do it, we will need to alter the CSS for the custom body class and the custom container class in the custom.css file. And we are also going to need to upload a seamless pattern (a .gif file usually works best) to the images folder in your custom file (yoururl–>wp-content–>themes–>thesis_151–>custom–>images.

Seamless Pattern? Who In The What Now?

When you use an image as the background for your website, you can do it in two different ways: 1) by using one giant image of roughly the right size to fill up your whole browser screen; or 2) using a very small image and “tiling” it side by side to fill up all of the page parameters. There are pros and cons to both methods, and the method you choose has to do with your personal preference as much as it does with the specifics of your page design. When you are working with images on websites, though, you should always take into account page loading time. Generally speaking, the larger the photo (both in terms of file size and just plain old inches size), the longer it takes to load. Good pages don’t leave their readers waiting around a long time for images to load if they can avoid it, so you want to try to lean towards whatever design is going to be most efficient, in my opinion.

The method we’re going to use today will create a background image by telling the browser to “tile” a small image (about 35 pixels by 35 pixels) over and over again throughout the page. Since this image is going to form a pattern, it needs to be made from a “seamless” tile, meaning that we don’t want to be able to tell where one tile ends and the next begins. There are various means of creating seamless tiles–you can download free patterns, create them in Photoshop or Illustrator, or go to a pattern-generating site for resources. Or, you can do what I did, and find a website with a seamless tile background that you like, and “borrow it.” Just make sure that you give it back. All knowledge is shared and all that. Once you’ve got your seamless pattern, you should use “save for web” in Photoshop to make it into a gif file. To make this tutorial easier, save it as “bg_pattern.gif.” That way, you can just copy and paste the code below. After you’ve done that, upload it to the images folder inside the custom folder in Thesis.

The CSS for a Tiled Background Image

This is where things get very similar to the tutorial on changing your background color. We are going to be changing the instructions for the background property in CSS by pasting in the following code into your custom.css file:

body.custom {
background: url('images/bg-pattern.gif') repeat scroll 50% 0;

Keep in mind that you need to take out any instructions you might have put into the custom.css file before. For example, if you already changed your background color, rather than pasting in this whole code, just replace the color code you used with the url('images/bg-pattern.gif') 50% 0 no-repeat; part and you’re good to go.

One Comment

  1. […] your website background and you purchased the Thesis theme like I did, you can follow the CSS code here. Learn how to change your iPhone wallpaper […]

Post a Comment

Your email address will not be published.