Backgrounds in WordPress, Tips and Examples ...

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:
 

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:

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

The image:

And the effect:

Examples based on WordPress design blogs:

Line25 Web Design Blog

Graphic Design & Web Design Blog

Desizn Tech

2. Repeat background image only vertically:

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

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:

The effect:

Note: this is the screenshot from Hey Josh site.

3. Repeat background image only horizontally:

The CSS code used: 

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:

The effect:

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

More examples:

Shizucor

Naldz Graphics

Hein Maas

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

 

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:

 

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:

The screenshot is from Web Designer Wall.

More exemples:

Webdesigner Depot

Assault Blog

Tutorial9

UGSMAG

By Marina

:: ilovecolors ::

Starcatcher

5. Display a fixed background image:

The fixed image will never scroll on a page.

 

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