Shopping Cart (0)

Easily change the look of your site with a simple pattern

0 Posted February 16, 2012 by Jedi Frog Categories: Code Snippets

Ok, heres a little disclaimer: this is a simple post just to show you how to quickly and easily change the look of your site, even if you have little experience or knowhow with css or background images.

The wrong background used on the the wrong site will look very ugly. So firstly, here are a few tips:

Make sure that your site is suited to a background image

If your site already has a lot going on visually, then adding a background may make it compete with the actual content of the site, as well as make the site in general look more cluttered and confusing to the user. So its probably best to have a relatively minimal site to start.

If in doubt, be subtle

This leads on from the first point. The idea is to enhance the content, not to compete with it. So dont use anything thats extremely bold or distracting. Bring out your classy side.

Understand your colour palette

If your site’s colour palette consists of shades of blues and greens, adding a red background texture is probably unwise. It needs to blend in to the existing palette so that doesn’t draw too much attention or clash with other elements on the page. Taking a colour from the existing palette, then making it slightly lighter or muted would be a far better idea.

Getting started

Firstly, we need an image that will tile (i.e repeat seamlessly). If you’ve got some Photoshop skills, you can of course make the image yourself, or alternatively you can Google for some already-made ones.

Your site
I’ve decided to use our theme Mojo as an example. Using the white/blue colour option as a base, I decided to use a texture that was a more muted, lighter blue than the calls to attention, yet had enough colour to differentiate it from the themes’s grey/beige action boxes.

So here are three different versions with three subtle texture differences:

So it pretty much appears like a lighter colour overlay with a faint texture. Here are the three images in a zip if you want them.

Adding them to your site

Find your theme or website’s images folder. It should be called images or img. Move or copy your background image into that folder. Next, locate your style sheet – it’s usually called style.css. Open it up with a text editor. We want to edit the ‘body’ property. When you find it, we want to simply add in the line for the new background-image:

body {
    background-image: url('images/name_of_your_image.png');

Remember, only add this in. Leave in any other existing properties. Save your file, load up your site, and it should have a new background!


Leave a Comment

TimThumb not displaying images? Let’s fix that!

If you've noticed that a number of images aren't displaying correctly ... Read more

George has something new to show you

Hello tadpoles! We're as happy and excited as a dog with two tails, to tell you about the latest theme from the team around the pond. It's called Cohesion, and we like to think of it as "a socially-engaged business theme". Read more

Adding a Tweet Box to your site

Both Windows and Mac are integrating social media platforms more and m... Read more

Valentines Giveaway: Win a copy of our new gorgeous theme – Occasions

Love is in the air, and lucky for you frogs aren't immune to Cupid's m... Read more

Hello, lovely tadpoles! Do you remember our post about adding Twit...

eFrog News Categories

Browse our themes