| |
| |
| Overview |
| |
In this chapter you will learn:
- Various background options
- Choosing background colors
- Placing images as a background
|
The background of any website is very important. Wrong use of colors in the background of a page won't lend an attractive sight to the text. If you choose a dark color for background and a light color for the text, then the text won't be really legible. Professional websites tend to apply light background with dark text.
The CSS background properties allow you to control the background color of an element. Besides, you can also place images in the background. Images can be placed either horizontally or vertically.
Different style options in context to background are explained below:
Background Color
- The background color property adds a background color for an element.
- This property can have the values- color-name, color-RGB, color-hex, and transparent.
- Either the color name, or the amount of red, green and blue using RGB can be specified. In addition, even a hexadecimal number or the option of no color can be specified.
- By default background color property value is transparent.
Example |
p { background-color : yellow;}
Lists are a fundamental way of organizing data in a linear way, one item after another.
p { background-color : #887799;}
Lists are a fundamental way of organizing data in a linear way, one item after another.
p { background-color : rgb(150,200,250);}
Lists are a fundamental way of organizing data in a linear way, one item after another. |
| |
Background Images
-
CSS lets you set a background image for both the page and single elements on the page.
-
It can have the values- none or url.
None specifies no background image is to be set.
Url specifies the path to an image.
In addition, CSS offers several positioning methods for background images. The background-repeat property determines how a specified background image is repeated.
- Background repeat property can have the values- repeat, repeat-x, repeat-y, no-repeat.
repeat - This will tile the image until the entire page is filled. The background image will be repeated horizontally and vertically.
repeat-x - This will repeat the background image horizontally.
repeat-y - This will repeat the background image vertically.
no-repeat - This will display the background image only once.
Example |
p{ background-image : url ("C:\backup\Sonoworld\Administrator\Admin\Images\adminpanel.gif");
background-repeat : repeat-x ;}
|
Our eyes are naturally attracted to motion, and some of the most successful pages exploit this by means of an easy technique called animation. Animation is a very easy way to add motion to the page in comparison to video.
|
| |
| |
| Summary |
| |
In this chapter you have learnt:
- Setting background colors
- Placing images in the background
- Tiling images horizontally or vertically
|
| |
| Review Questions |
| |
Fill in the Blanks
- The default background color property value is _____.
- Background image property can have values _____ or _____.
- Background images can be placed _____ or _____.
Solutions
- Transparent.
- None, url.
- Vertically, horizontally
| Exercise |
| Show background effects on a web page |
| Solution |
|
| |
| |
|
| What's Next |
The next chapter will acquaint you with how to work with fonts. It will discuss other font options like font-family, font-size, font-stretch and font-variant.
Hop over to the next chapter to get a close-up on fonts.
|
| |
|
|
