A reader emailed me last week:
Love your tutorial about designing a blog header – do you have one for blog backgrounds?
I love how you guys keep me in topics for my weekly How To feature.
1) Find a seamless image.
First of all, you must have a pattern that is repeatable. That means that the sides line up so that when it tiles or repeats, it will look like a continuous pattern. One of my biggest pet peeves with blog designs is when the background doesn’t tile properly, and you can see the “seams.” Sends my OCD into overdrive.
So when you go to search for blog backgrounds, always include the word “seamless” along with whatever design element you’re going for.
2) Save and host your image.
Once you find the seamless pattern you like, you need to host it somewhere. I use Photobucket.
3) Copy the direct link to your clipboard.
Photobucket will give you a “direct link” to the hosted image under the thumbnail of the image.
A direct link looks like this:
Copy that to your clipboard.
4) Create the code in the HTML of your blog.
Log into your Blogger account. (Directions for Typepad and WordPress to follow.) Go to Template then Edit HTML. Locate the ‘body’ section in your CSS. It looks like this:
body {
background:$bgcolor;
Replace the selection in bold so it looks like this:
body {
background-image: url(http://i268.photobucket.com/albums/jj12/dcrdesign/swirl-wallpaper-green-1.jpg);
Use the direct link to YOUR image, of course — not mine. Unless you like mine. Then it’s all yours.
5. Preview your blog to see if it looks the way you want it.
It should! If not, um, I plead the 5th.
Typepad Instructions:
For Typepad users, you must have the Pro account to access your CSS. If you have the Pro account, then all you have to do is go into Design and click on Edit CSS. It is probably a blank box. Just enter this:
body {
background-image: url(http://i268.photobucket.com/albums/jj12/dcrdesign/swirl-wallpaper-green-1.jpg);
background-repeat: repeat;
}
Use the direct link to YOUR image, of course.
WordPress Instructions:
WordPress is more complicated because every theme is different. In MY theme, it looks almost like the Blogger one. My body tag looks like this:
body {
width: 1006px;
background: url(http://i268.photobucket.com/albums/jj12/dcrdesign/swirl-wallpaper-green-1.jpg);
Got questions? Comments? Other tips to share? I’ll respond to feedback in the comments.
I have been thinking about this a lot and was planning to email you about it! I’m having trouble finding an image to start with. Because I don’t really want an image – I just want some texture on my red background. Does that make sense? How can I do that? (Thank you!!)
Awesome Jo-Lynne!
I just made two very very simple buttons all on my own — partly inspired by how easy you made it sound on an earlier how-to post.
Thanks.
Saving this for when I get tired of clean, white and minimal. I think I like clean, white and minimal because it is the exact opposite of my house!
I love your how to posts. I need to try my hand at making over my blog. I am scared but I know with a little time and help from my hubby I could do it.
THANK YOU so much for this easy to follow tutorial. I appreciate it SO much.
Now that I found a background that I like though, how can I keep the middle of my blog what like yours? It is so hard to read with the background in the middle of the page…
I have the same question as Kristin. How do I keep the white in the middle?
Thanks!
With the Minima Template, you need to add this bit of code to the #outer-wrapper section:
background: #fff;
That should do it.
I was just wondering how I can make my white in the middle wider because my photos are bigger than the ones you upload from blogger. Is there a way to do that so it doesn’t cut my pictures off?
Are you using Minima? If so, it’s fairly simple. You’ll need to go into your CSS and widen the template in a few places. Add 100 pixels to the header wrapper, the outer wrapper, and to the main wrapper. If you have a custom header, that may need to be adjusted too. If you give me the url to your blog, I can be more specific.
Uh, I’ve followed your instructions to the T and nothing happened. My background stayed white. Any idea’s what this happened?
Thank you for the advice on how to create a background. I have another question for you. I recently found some fun free fonts at dafont.com and downloaded them, but have no idea where they went or how to access them. I’d love to use them in PSE, but can’t figure out how to make them show up there. Any advice for that?
Thanks!!!
Hey There,
Recently found your blog and I’m exploring it since last half an hour
I finally decided to take the whole blogging thing more seriously and was looking to give my blog a facelift. Whole lots of things to do but firstly I was looking for a very good share button. I see that most well designed blogs these days have this follow me button “with twitter, facebook, RSS and mail in one row. Even yours has one. How do u do that? I have been trying to find it out all over the internet but just have found anything 