Do you have a question you would like to Ask The Sietch? Contact us or post your question in the Forums, and we will do our best to answer it.

I got this fun question from Casey today.

Message: Hi there. I’m new to WordPress, CSS, PHP, etc. but I’ve had some nominal success so far. I have a question for you regarding your Sietch Blog site:

How do you go about tiling a repeating image on the background, as you have on your blog? What code should I put into my stylesheet? I’m working on a theme template called fSpring Widgets.

Any direction you might be able to provide would be terrific!

Thanks,
Casey

Lets start from the start. CSS (cascading style sheets) allow you to have one file (or a couple of files) that controls the look and feel of your whole site. One of the main reasons you would use CSS is that it makes changing the look and feel of your whole site very easy. Imagine if you had 1000 pages in your site and you had to go in and change the red title to blue. Not only would this be very boring it would take ages (sorry for going over all that if you already know it, like I said, I like to start at the start).

So I went and downloaded your theme, and found that, your theme uses a wide thin image that is repeated vertically to create the illusion of a long single column, a technique sometimes called “fake columns” or “faux columns”. You need to find and open the .css file for your theme. For your theme it is called, style.css.

You will most likely find it in, site.com/wp-content/themes/fspring/style.css (replace site.com with the name of your site, for instance mine is blog.thesietch.org you might use something.com or something.site.com or site.com/blog)

At this point stop everything and make a backup copy of any of the files you will be playing with during this little tutorial (style.css and bg.png)

When you open the file you will see a list of css commands that control the look and feel of your site. The command you are looking for is the one that changes the background of the body. If you look you will find these lines…

body {
margin: 0px;
padding: 0px;
background: #ececec url(images/bg.png) repeat-y center;
color: #666;
font: 11px/15px Verdana, Arial, Helvetica, sans-serif;
}

You will see that the background image is called bg.png and that it is repeated along the y axis (up and down). If you open bg.png in an image editor you will find that it is 1 pixel wide and 824 pixels wide.

To change your background you will need to do one of two things. You will need to edit bg.png and then re-upload it. Or you will have to change bg.png to another image file you would rather see (for instance the image you would like to tile).

Lets say you have another background image you would like to see repeated on the background, newbg.jpg. First upload newbg.jpg to the fspring images folder. (make sure its in the images folder for your theme and not for wordpress) You would then change the code in your css file to this.

body {
margin: 0px;
padding: 0px;
background: #ececec url(images/newbg.jpg) repeat scroll center top;
color: #666;
font: 11px/15px Verdana, Arial, Helvetica, sans-serif;
}

This will repeat newbg.jpg horizontally and vertically down the page. You will notice something right away, the fancy borders that used to surround your main column are gone, you will also notice that the main column is also now coated with your new background image. This is because the author of your blog used the long skinny bg.png to also color the main columns background. You can change this by going back to your css and changing the following.

#wrap {
width: 800px;
overflow: hidden;
position:relative;
margin: 0px auto;
}

To

#wrap {
width: 800px;
overflow: hidden;
position:relative;
margin: 0px auto;
Background: white;
}

you might also want to change this

div#pages {
height: 40px;
margin: 0px auto 5px;
width:780px;

}

to this

div#pages {style.css (line 85)
background:white none repeat scroll 0%;
height:40px;
margin:0px auto 0px;
width:800px;
}

This should get you started, you will notice that your theme no longer has the same look and feel, you can play around with the CSS code, perhaps add some borders or play with the layout a bit. It will be a great learning experience as this is a pretty simple theme, and well documented. If you need more help feel free to comment, or email me back, or if someone else has some good advice for Casey leave a comment.