Learn to Create and Position Background Images on Your Site
In the article bad background design, we discussed what you should not do with your website backgrounds, because sometimes people “overdress” their sites and distract their visitors. It was suggested not to use funky background images and use “clean” design instead.
However, not all background images are bad. Of course when you are new to designing, there’s big chance that you’ll screw something up. However, nicely created backgrounds look good and sometimes make positive impact to the user. If you have an ecommerce website, good looking backgrounds that flow with the rest of design can even help to convince the customer to order from you.
Below we’ll talk about how to create and use background images on your site that look good and don’t scare your visitors away.
Free Software For Creating and Editing Images
First, you need software that will enable you to create an image. If you are planning to become a professional graphic designer, then you might consider an expensive, but very good Adobe tool – Photoshop. It provides you with many effects that some of the most professional designers use these days.
However, if you don’t have additional $650 to spend, you can get some useful free tools to help you out. One of the best open source image editing tools is Gimp. It has lots of features. Even professional graphic artists would not be disappointed with this software.
Another free software is PhotoPlus 6. It is quite good. One good thing about it is that it gives you ability to define the quality of your gif images, while Gimp doesn’t have this feature for gif format. You can download any of them, or even try both and see which one is better for you.
Creating a Website Background Image
Now, let’s say you want to create a tiled (image that repeats on page) image for you website. You open one of the free tools mentioned above and create a small (20 x 20) pixel image. Depending on the background you want to create, you usually need very small images.
The size of the image above is 108 bytes onlyNow you can add your picture into the HTML page. The simplest thing would be to use the code below:
<body background="yourimage.gif">
You simply replace your existing <body> tag on your web page with the one given above. Just make sure your image is on the same folder as your web page. Otherwise you’ll have to type in the correct path. If your image is in “/Site/Images/” and your web page in “/Site/” directory, your path to the image would be:
<body background="/Images/yourimage.gif">
So your web page’s background will look like the one below:
Background Images and Cascading Style Sheets
Cascading style sheets (CSS) will allow you to change your background image on all the pages and you’ll have to edit only one file. Normal (internal) CSS will not benefit you much. You’ll need external style sheets. If you don’t know how to make external style sheets, don’t worry, we’ll help you out.
First, if you don’t have any HTML editing tool, (you should have if you’re a webmaster) you can open any Text editor, like Notepad in Windows. Put in it the following code:
body { background-image: url(imageFolder/yourimage.gif) }
And press “Save As”. Of course, you’ll have to replace “imageFolder” with the correct path to the image. Then in the name window, type the name and extension, like “style.css” and save it into the same directory as your web page. Then you put this code below between your page’s <head> </head> tags:
<link href="style.css" type="text/css" rel="stylesheet">
You have to put this code in every web page. However, once you insert this code, you don’t have to change it on every single page. All you need to do, if you decide to change the background image, is to edit one file only – style.css. That’s it.
Ok, we’ve learned how to make a background that tiles. But what if you want to put only one image on your page that does not repeat on the page. Cascading style sheets come into help again.
What you have to do, is open your “style.css” file and add “no-repeat” string next to your code, so it all looks like this:
body { background: url(imageFolder/yourimage.gif) no-repeat }
You’ll get something like this:
If you use “no-repeat” string, your image will be on the top left corner of your page. It could be good, but you might want to put your image in center of a web page. In that case, you should add another string to your CSS file, so it looks like this:
body { background: url(imageFolder/yourimage.gif) no-repeat center }
Then the image will be displayed on the center of your web page.
Of course, background images look best when they are repeated (or tiled) on a page. You can create or use any image you want.
In Conclusion
With free image creation and editing tools we described in the beginning, you can make very good looking background images for your site. The most important thing to realize is that you should make your text easy to read. The bigger the contrast between text and background image, the better.
A quality background image can bring you very positive results. Even the simplest background image, like we used above, can create a pleasant mood in your visitors mind and make him order from you. But be careful and do not overdo it. The line between professional design and amateurish experiment is very thin and you can distract people quickly.
