Backgrounds in WordPress, Tips and Examples

By: Alexandru Vornicescu | April 4, 2009 | Customization | 11 Comments

As we know the background is a important thing in the design of the theme, choosing a right placement and construction is very difficult so that’s why I created this article.

In this article I want to show you how to make a background to your WordPress blog, what kind of background style you can use, what CSS codes require to add in your style.css file and some great examples based on very creative blog designs.

For the background you can use a simple color, to place an image or an image that will repeat in a direction.

How to set the background color:

To set a background color you need to edit the style.css of the WordPress theme and to add css codes in it. For example adding a black color:

1
2
3
4

body
{
  background-color:#000000;
}

Here you can choose a color if you don’t have a color code application.

How to set a background image:

To set a background image you need to edit the style file of the theme, often this file name is style.css, to see the changes just save this file and upload to you host in the theme folder.

1. Very simple code that will repeat image:

1
2
3
4

body
{
  background-image:url('http://wpcrowd.com/wp-content/themes/alexvorn/img/136.gif')
}

The image:

136

And the effect:

image-repeat1

Examples based on WordPress design blogs:

Line25 Web Design Blog

line25-web-design-blog

Graphic Design & Web Design Blog

graphic-design-web-design-blog

Desizn Tech

desizn-tech

2. Repeat background image only vertically:

This mean that the image will repeat from top to bottom:

1
2
3
4
5

div.content
{
  background-image:url('http://www.heyjosh.com/assets/images/binder-bg.png');
  background-repeat:repeat-y;
}

The code repeat the background image in the “div” tag of the content:

The image:

binder-bg1

The effect:

hey-josh
Note: this is the screenshot from Hey Josh site.

3. Repeat background image only horizontally:

The CSS code used:

1
2
3
4
5

body
{
  background-image:url('http://blogspoon.s3.amazonaws.com/wp-content/themes/SpoonGraphics_V4/images/body-bg.jpg');
  background-repeat:repeat-x;
}

Repeating an image horizontally is often used on buttons, menus and body too.

The image:

body-bg

The effect:

blog
Note: this image above is a screenshot of Blog.SpoonGraphics site.

More examples:

Shizucor

shizucor

Naldz Graphics

naldz-graphics

Hein Maas

hein-maas

4. Display background image only one time (no repeat):

1
2
3
4
5

body
{
  background-image:url('http://wpcrowd.com/wp-content/themes/alexvorn/img/136.gif');
  background-repeat: no-repeat;
}

As default this image is showing in the left in top but we can make it to show in center or right.

This CSS code will make the background image to show in the top and in center position:

1
2
3
4
5
6

body
{
  background-image: url('http://www.webdesignerwall.com/wp-content/themes/wdw/images/main-bg.jpg');
  background-repeat: no-repeat;
  background-position: center top;
}

The effect:

web-designer-wall

The screenshot is from Web Designer Wall.

More exemples:

Webdesigner Depot

webdesigner-depot

Assault Blog

assault-blog

Tutorial9

tutorial9

UGSMAG

ugsmag

By Marina

by-marina

:: ilovecolors ::

ilovecolors

Starcatcher

starcatcher

5. Display a fixed background image:

The fixed image will never scroll on a page.

1
2
3
4
5
6

body
{
  background-image: url('http://buildinternet.com/wp-content/themes/buildinternet-v2/images/watercolor-bg.jpg');
  background-position: center top;
  background-attachment: fixed;
}

To view some examples you can go to these sites:
Burger King Studio
Build Internet!

Where you can find some great backgrounds:

11 Responses:

  1. Desiztech 4 April 2009 at 3:01 pm #

    Very nice tutorial for the beginners. Thanks for the mention .

  2. Jeeremie 5 April 2009 at 12:58 am #

    Nice post. Maybe you could have been one step further by explaining how to optimize a full image background.

  3. Danh ba web 2.0 6 April 2009 at 3:15 am #

    Thanks for good tutorial. Keep up

  4. Bill Lowden 6 April 2009 at 10:16 am #

    Great tutorial. I like how you used exsisting sites to show the different background options in use. Thanks.

  5. WPDONE 7 April 2009 at 12:05 am #

    Good article and well explained. Thanks

  6. Elliot 7 April 2009 at 12:38 am #

    Thanks for featuring I Love Colors in this great tutorial. I just want to add that the body tag at my site has
    display:table;
    to prevent offset when window is smaller than in Gecko browsers, for instance Firefox and Flock.

  7. Elliot 7 April 2009 at 12:41 am #

    Thanks for featuring I Love Colors in this great tutorial. I just want to add that the body tag at my site has
    display:table;
    to prevent offset when window width is much smaller than the background width in Gecko browsers, for instance Firefox and Flock. This is safe to be added on the main stylesheet since IE 6 and 7 doesn’t have this offset issue and they will translate the table statement to block.

  8. The Kettle Theory 18 August 2009 at 6:38 pm #

    Great advice. Very helpful advice to help me setup my new site. Much appreciated.

  9. Pixelrage 21 November 2009 at 2:02 am #

    This is exactly what I was looking for – it’s been hard figuring out how wide and high to make the backdrop. This is a big help…thanks :)

  10. Matt SIch 9 February 2010 at 7:11 pm #

    hey, when I use the repeat-y thing, the image repeats on the left of the window… how do I make in repeat on the center?

  11. ikhwan 16 April 2010 at 12:45 pm #

    great tutorial for newbie like me

    thanks


Leave a Reply