The Background

Unknown Data · 1 The Background Tue Oct 26, 2010 7:50 pm

Unknown Data

Registered Member

Posts : 833
Points : 254
Age : 28
Location : Denmark
Browser : Safari

The Background
Learn CSS - part 7

Agian will we take a look at many things in this lesson, bu mostly is it about images and background.
Anyway. Let's go further so we can start this tutorial.

Color
It's very easy to indicate the color for a element.
The only thing we do, is write the color we wish to use in the value - like this.

Code:: p { color: #000000; }

Backgroundcolor
This is very equal to the color of a elemet, we just indicates the background before writing color, and then is it done.
Here is it also a possibility to set the background as transparent.

Code:: p { background-color: #0000FF; }

Picture as background
This example shows easily how to set a image as the background, for the body.

Code:: body { background-image: url("image.png"); }

Repeat of the backgroundimage
This aren't so easy to understand as the previus, so listen carefully.

You can repeat your backgroundimage, it can be done horizontal or vertical. These values can be used:

• background-repeat: repeat-x; Horizontal repeat of picture.
• background-repeat: repeat-y; Vertical repeat of picture.
• background-repeat: repeat; Horizontal and vertical repeat of picture.
• background-repeat: no-repeat; The picture isn't going to get repeatet.

If you are unsure about how to set it up, can you see an example under here.

Code:: body { background-color: #0000FF; background-image: url("image.png"); background-repeat: repeat-y; }

Fixed- or scrollable
The backgroundimage you have choosed, can you lock it to you website.
It can you done be typing this.

Code:: body { background-attachment: fixed; }

We can also try it out without lock it, the wource will the look like this.

Code:: body { background-position: 25% 50%; }

Upper left corner is our starting point and the example should we move 25% to the right (horizontally) and 50% downwards (vertically). The easiest way is to imagine that the screen is a big coordinatesystem with x and y axis'.
You have several options to indicate the position of your image. The indications that are most used is procent as shown in the example. You can also use other values such as: top, bottom, left, right, center etc.

Mergin
We can merge all our content, it will make it all much easier to look at. The following example illustrates like this.

Code:: body { background: #0000FF url("image.png") no-repeat fixed center center; }

Note! It's important to compilate it all in following sequence.
[background-color] [-image] [-repeat] [-attachment] [-position]

Agian have we learned a lot of information. In next lesson are we looking at the links and some effects.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.