Web Design Backgrounds

Web Design Backgrounds

Web Site Backgrounds are one of the most important elements to give your site an interesting look. Compared with just a few years ago the evolution has been enormous namely because of the better screen quality as well as due to faster internet connections allowing faster display of pixel rich content.

Backgrounds have become an important element in web design where we distinguish two basic types of backgrounds:

1. Body Backgrounds

2. Content Backgrounds

Body Backgrounds

The Body Background holds the theme. It’s the most distant background which can consist of a color, a picture, a texture or pattern or another graphical element. Some sites still prefer plain white, such as this site or less popular places like Google, YORGOO, Yahoo, Cashflowin and such like .

Content Backgrounds

Content Backgrounds hold text, pictures or other content elements. Examples are header backgrounds, sidebar backgrounds, widget backgrounds, image backgrounds, player backgrounds, overlay-backgrounds.

Web Design and Backgrounds

There is a fundamental difference between the above two classes of backgrounds: Body Backgrounds need to be extensible in function of the screen size and resolution used by site visitors. Content backgrounds are predictable, function of a space and its size defined by the web designer.

Background Web Design

Basically there are three options:

1. Layered Backgrounds

whereas the content background sits on top of the body background. The trend is in such a case to use a background picture for the body background and then to use semi-transparent elements for the content backgrounds.

Semi-transparent on plain background

In most cases however the content container has a plain set width background. The body background then shows beyond the wrapper dimensions.

Typical examples are most blogs such as the example from our Web Design Workshop:

Layered plain background on plain background

2. Content set directly on Body Background

Bianca Gubalke created a beautiful background for her test site where content is projected directly on the body background:

Content on Body Background

3. Body and Content Background as one

The typical example would be the Financial Times Look from our Web Design Workshop:

Body and Content Background as one

How to design good backgrounds

Our Workshop will take care of this topic, explaining the various techniques used to create good backgrounds. At this point, let’s just look into one big problem area, which is the Body Background where images are used.

How to use Images as Body Background

You can either tile images or pull in a large picture as a background. When you tile, make sure that the images fit well together and form a pattern.

If you use a big background image, you have to think about the resolution used by your visitors. The images should be big enough to fit any resolution and it should not be re-sized or distorted in any way. To limit the height, you may scroll your main container over the image (like on twitter).

Background CSS

Here are some of the most used calls to define the background in your CSS Style-sheet:

- background

- background color

- background-image

- background-position

- background-repeat

-background-attachment

Background

background is used in our Workshop Style-sheet to indicate a call to define a background. This is a shorthand property which lets you add all the other properties into one call.

Example:

background: #eaeaea url(images/bg.jpg) fixed, no repeat, top center;

This line can be split into individual properties as needed, see below.

Background Color

The background color defines the background color of an element; it can be transparent or a color by using a color code. In the absence of a background definition, the background of an element will be transparent.

Examples:

background-color: #eaeaea;
background-color: transparent;

Background Image

To embed an image as a background we just refer to the image URL .

Example with an absolute link:

background-image: url(http://yorgonestoridis.com/images/dd.jpg);

Example with a relative link:

background-image: url(images/dd.jpg);

I suggest to use always a color when you use an image to make sure the text is legible in case the image is not available.

background: #eaeaea url(images/dd.jpg);

Background Position

This is a somewhat more tricky issue as CSS allows to position backgrounds unlike in traditional HTML where backgrounds are positioned on the top left.

To position your background you may use keywords or distances in pixels or percentage values. lets keep it simple here:

Most of the time you will use keywords and combination of keywords:

top
left
center
right
bottom

Here is how to call for some basic positions:

'top left' and 'left top' both mean the same as '0% 0%'. 'top', 'top center' and 'center top' mean the same as '50% 0%'. 'right top' and 'top right' mean the same as '100% 0%'. 'left', 'left center' and 'center left' mean the same as '0% 50%'. 'center' and 'center center' mean the same as '50% 50%'. 'right', 'right center' and 'center right' mean the same as '100% 50%'. 'bottom left' and 'left bottom' mean the same as '0% 100%'. 'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'. 'bottom right' and 'right bottom' mean the same as '100% 100%'.

Example:

background-position: top right;

means the same as:

background-position: 100% 0%;

This is an interesting feature: imagine you would wish to use your portrait as a background picture and fade the picture into a background color: you would position the image say 50 pixels from the top left and 20 pixels from the left side and set it on the background color to which the edges fade, say the color was #eaeaea:

background-position: 50 px 20px; background-color: #eaeaea url(images/dd.jpg);

Background Repeat

When tiling an image we use the background-repeat property. We can tile horizontally ‘x’ or vertically ‘y’ or both or we can set: no-repeat.

background-repeat: no repeat; the image is shown once only
background: repeat; the image is tiled horizontally and vertically
background: repeat-x; the background is tiled horizontally
background: repeat-y; the background image is tiled vertically

Background Attachment

Traditionally when you scroll a HTML page, the background scrolls with the content. CSS let’s you attach or detach the content from the background.

The possible values are: fixed or scroll.

Example:

background-attachment: scroll;
background-attachment: fixed;

On the first example, the content container scrolls over the background, whereas on the second, the content container is attached (fixed) to the background.

Attachment can be used with any element having a background, also within the content containers.