Home1
The Background on Tue Oct 26, 2010 6:20 pm
Unknown Data
Registered Member
Posts : 812
Points: 245
Age : 16
Location : Denmark
Browser:
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.
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.
Picture as background This example shows easily how to set a image as the background, for the body.
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.
Fixed- or scrollable The backgroundimage you have choosed, can you lock it to you website. It can you done be typing this.
We can also try it out without lock it, the wource will the look like this.
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.
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. |
