Web Design Backgrounds

by Yorgo Nestoridis

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

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 hold text, pictures or other content elements. Examples are header backgrounds, sidebar backgrounds, widget backgrounds, image backgrounds, player backgrounds, overlay-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.

Basically there are three options:

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

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

Content on Body Background

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

Body and Content Background as one

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.

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).

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 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.

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;

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);

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);

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

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.

• Web Design Workshop 11 Background
• Web Design Workshop 6 Main Wrapper
• Web Design Workshop 15 Disney Look
• What is CSS
• Web Design Workshop 12 Blockquotes and Pullquotes

This page is wiki editable click here to edit this page.

• web design background
• web design backgrounds
• web backgrounds
• web site design backgrounds
• web back grounds
• more background for web page
• backgrounds in web design
• photoshop satin
• music note background webdesign
• semi transparent background example

Related posts:

1. Web Design Workshop 11 Background
2. Web Design Workshop 6 Main Wrapper
3. Web Design Workshop 15 Disney Look
4. Web Design Background Graphics
5. Web Design Workshop 7 Sidebar

Tags: Background, Background Attachment, Background Color, Background CSS, Background Design, Background Image, Background Position, Background Repeat, Background scrollong, background tiling, Body Background, Content Background, Layered Background, Web Design Background, Web Design Colors, Web Design CSS, Web Design Elements, Web Design Graphics and Images, Web Design Workshop, Yorgo Nestoridis

This entry was posted on September 18, 2009 at 3:59 am and is filed under Web Design, Web Design Basics. You can follow any responses to this entry through the RSS 2.0 feed.