Web Design Backgrounds

by Yorgo Nestoridis

Web Site Back­grounds are one of the most impor­tant ele­ments to give your site an inter­est­ing look. Com­pared with just a few years ago the evo­lu­tion has been enor­mous namely because of the bet­ter screen qual­ity as well as due to faster inter­net con­nec­tions allow­ing faster dis­play of pixel rich content.

Back­grounds have become an impor­tant ele­ment in web design where we dis­tin­guish two basic types of backgrounds:

1. Body Backgrounds

2. Con­tent Back­grounds

The Body Back­ground holds the theme. It’s the most dis­tant back­ground which can con­sist of a color, a pic­ture, a tex­ture or pat­tern or another graph­i­cal ele­ment. Some sites still pre­fer plain white, such as this site or less pop­u­lar places like Google, YORGOO, Yahoo, Cash­flowin and such like .

Con­tent Back­grounds hold text, pic­tures or other con­tent ele­ments. Exam­ples are header back­grounds, side­bar back­grounds, wid­get back­grounds, image back­grounds, player back­grounds, overlay-backgrounds.

There is a fun­da­men­tal dif­fer­ence between the above two classes of back­grounds: Body Back­grounds need to be exten­si­ble in func­tion of the screen size and res­o­lu­tion used by site vis­i­tors. Con­tent back­grounds are pre­dictable, func­tion of a space and its size defined by the web designer.

Basi­cally there are three options:

whereas the con­tent back­ground sits on top of the body back­ground. The trend is in such a case to use a back­ground pic­ture for the body back­ground and then to use semi-transparent ele­ments for the con­tent backgrounds.

Semi-transparent on plain background

In most cases how­ever the con­tent con­tainer has a plain set width back­ground. The body back­ground then shows beyond the wrap­per dimensions.

Typ­i­cal exam­ples are most blogs such as the exam­ple from our Web Design Work­shop:

Lay­ered plain back­ground on plain background

Bianca Gubalke cre­ated a beau­ti­ful back­ground for her test site where con­tent is pro­jected directly on the body background:

Con­tent on Body Background

The typ­i­cal exam­ple would be the Finan­cial Times Look from our Web Design Workshop:

Body and Con­tent Back­ground as one

Our Work­shop will take care of this topic, explain­ing the var­i­ous tech­niques used to cre­ate good back­grounds. At this point, let’s just look into one big prob­lem area, which is the Body Back­ground where images are used.

You can either tile images or pull in a large pic­ture as a back­ground. When you tile, make sure that the images fit well together and form a pattern.

If you use a big back­ground image, you have to think about the res­o­lu­tion used by your vis­i­tors. The images should be big enough to fit any res­o­lu­tion and it should not be re-sized or dis­torted in any way. To limit the height, you may scroll your main con­tainer over the image (like on twit­ter).

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

- back­ground

- back­ground color

- background-image

- background-position

- background-repeat

–background-attachment

background is used in our Work­shop Style-sheet to indi­cate a call to define a back­ground. This is a short­hand prop­erty which lets you add all the other prop­er­ties into one call.

Exam­ple:

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

This line can be split into indi­vid­ual prop­er­ties as needed, see below.

The back­ground color defines the back­ground color of an ele­ment; it can be trans­par­ent or a color by using a color code. In the absence of a back­ground def­i­n­i­tion, the back­ground of an ele­ment will be transparent.

Exam­ples:

background-color: #eaeaea;

background-color: transparent;

To embed an image as a back­ground we just refer to the image URL .

Exam­ple with an absolute link:

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

Exam­ple with a rel­a­tive link:

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

I sug­gest to use always a color when you use an image to make sure the text is leg­i­ble in case the image is not available.

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

This is a some­what more tricky issue as CSS allows to posi­tion back­grounds unlike in tra­di­tional HTML where back­grounds are posi­tioned on the top left.

To posi­tion your back­ground you may use key­words or dis­tances in pix­els or  per­cent­age val­ues. lets keep it sim­ple here:

Most of the time you will use key­words and com­bi­na­tion of keywords:

• top
• left
• cen­ter
• right
• bot­tom

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

Exam­ple:

background-position: top right;

means the same as:

background-position: 100% 0%;

This is an inter­est­ing fea­ture: imag­ine you would wish to use your por­trait as a back­ground pic­ture and fade the pic­ture into a back­ground color: you would posi­tion the image say 50 pix­els from the top left and 20 pix­els from the left side and set it on the back­ground 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 prop­erty. We can tile hor­i­zon­tally ‘x’ or ver­ti­cally ‘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 hor­i­zon­tally and ver­ti­cally
background: repeat-x; the back­ground is tiled hor­i­zon­tally
background: repeat-y; the back­ground image is tiled ver­ti­cally

Tra­di­tion­ally when you scroll a HTML  page, the back­ground scrolls with the con­tent. CSS let’s you attach or detach the con­tent from the background.

The pos­si­ble val­ues are: fixed or scroll.

Exam­ple:

background-attachment: scroll;

background-attachment: fixed;

On the first exam­ple, the con­tent con­tainer scrolls over the back­ground, whereas on the sec­ond, the con­tent con­tainer is attached (fixed) to the background.

Attach­ment can be used with any ele­ment hav­ing a back­ground, also within the con­tent containers.

• Web Design Work­shop 11 Background
• Web Design Work­shop 6 Main Wrapper
• Web Design Work­shop 15 Dis­ney Look
• What is CSS
• Web Design Work­shop 12 Block­quotes and Pullquotes

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

• web design background
• web design backgrounds
• web back­grounds
• liandry
• web back grounds
• back grounds web design
• more back­ground for web page
• grunge back grounds
• web site design backgrounds
• gimp grunge

Related posts:

1. Web Design Work­shop 11 Background
2. Web Design Work­shop 6 Main Wrapper
3. Web Design Work­shop 15 Dis­ney Look
4. Web Design Back­ground Graphics
5. Web Design Work­shop 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.