Background Images to Make Your Site Look Great

Readability and user-friendliness of your site depend greatly on background images that make your web page look nice. There are several properties involved in the background images manipulations and the property background can help you a lot to deal with them all:

body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Now let’s look through the properties it amalgamates including their possible values.

background-color that specifies the background colour of the box and has such values as

• inherit
• transparent (default)
• [color]

For example,

#dooberry { background-color: red; }

background-image – the location of the image itself. Here are the possible values:

• inherit
• none (default)
• [URI]

For example:

#plow { background-image: url(someimage.jpg); }

background-repeat – how the image repeats itself.

• inherit
• repeat (default) – tiled, repeats the image horizontally as well as vertically.
• repeat-x – repeats the image horizontally only.
• repeat-y – repeats the image vertically only.
• no-repeat – shows just one instance.

Here is the sample:

#header { background-repeat: repeat-x; }

background-position – indicates the position of a background image within its containing element.

• top
• right
• bottom
• left
• center
• [combination]
• [percentage]
• [length]

It can be just top or double such as bottom right. For example:

.winehouse { background-position: bottom right; }

You can use background images not for the whole page (body) only but also in most HTML elements. With their help you can solve simple but essential tasks for example, shaped corners.

For some people it seems to be really attractive to create a full-on brightly coloured photograph tiled across the background of a page. All we know that the most user-friendly text is black on a plain white background so try not to overuse background images. The best place for background images is with no content. You also can make background image very light. Experiment and try to make the site that is readable and attractive as well.