Quick Tutorial: Add Custom Backgrounds To Your Site

With all the backgrounds and textures that I offer on my site I feel that there might be a need for a quick tutorial on how to add custom backgrounds to your site. This tutorial also applies if you’re using a website builder like 123-reg, but you will typically have to select the CSS dashboard to edit the CSS code. To start with this you will need one image. Lets start out with a large centered background image.

For those that are new to CSS you will nee to learn a tiny bit of code to get this to work on your site. The first thing you need to do is choose your image. Check out the image below. This is the one that I will use in the first demo.

1950 Photoshop background design

demo 1

If you want to use this image you will need to add the following CSS to your body.

body {
 background:#11151e url(The Image URL) top center no-repeat;
}

The color #11151e is what will be behind the large centered image.

Next background is a texture background that we will make repeat across the screen behind the content.

Here is the image I will use:

bg-01

The CSS code to make your texture repeat is:

body {
 background: url(The Image URL) top left repeat;
}

demo 2

Here are some quick tips:

  • Make sure that your content area wont be affected by the background image. Like a white image with a white content and light colored text.
  • Make your background image as small in size as you can get it without loosing to much quality.
  • If your background is centered and not repeating, make sure to add a background color similar to the edges of the image.
  • Do some searches and look at other sites for inspiration.

This is simple way to add a customized look to your website. There are many different ways and styles of background image use out there. One of my favorites right now is the the responsive full screen background image. If you are interested in that take a look at this post listing some amazing sites.

Here are a few of my favorites:
http://ringvemedia.com/
http://www.onsidesportsagency.com/
http://starmatic.com/

Soon I will post how to use custom backgrounds with a responsive site. Right now my favorite way is to use a nice background texture that repeats. That way it will flow with different screen resolutions.

Hope some of you will get some use out of this. Good luck!