In this post I will discuss about CSS color and list of background attributes.
Following is the list of foreground and background color attribute exist in CSS.
1)color
2)background-color
3)background-image
4)background-repeat
5)background-attachment
6)background-position
7)background
In the following section there is some discussions about these properties/attributes.
1)color: The color property is for foreground color of an HTML element. The color attribute can be entered through three ways.
i)Hexadecimal value: example is, color: #ff00ee; where first pair ff represents red, second pair 00 represents green and last pair ee represents blue.)
ii)Naming the color: You can name the color with color attribute. Like you can describe blue color by color:blue; red one by color:red; etc.
iii)Third way is define the color in rgb notation. Like color:rgb(100,123,233) where first one represents red, second os green and third one is blue. The measurement is between zero(0) to 255 where 255 represents fully red/green/blue and 0 represents no red/green/blue.
2)background-color: The background-color property describes the background color of an element. The value can be entered same as color attribute. To make blue background we can write, background-color: blue;
3)background-image: With background-image property we can insert background image for a web page. To do this you need to apply the background-image property to <body> and specify the location of the image.
Example is,
body {
background-image: url("myimage.jpg");
}
4)background-repeat: If you set your background image using background-image property by default the image is repeated both horizontally and vertically to cover the entire screen. However, there will be many times where you may not wish to repeat your background image. You can control this by using background-repeat property.
There is four different values for background-repeat.
i)background-repeat: repeat-x - The image is repeated horizontally
ii)background-repeat: repeat-y - The image is repeated vertically
iii)background-repeat: repeat - The image is repeated both horizontally and vertically
iv)background-repeat: no-repeat - The image is not repeated
5)background-attachment: The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.
This property can have two values.
i)Background-attachment: scroll - The image scrolls with the text of the web page - unlocked
ii)Background-attachment: fixed - The image is locked. That is background image will not move with the text when a reader is scrolling the page.
6)background-position: By default, a background image will be positioned in the top left corner of the screen.
But you may want to put the background image anywhere on your screen. The property background-position allows you to do this.
There are various ways to set the values of background-position.
i)background-position:200px 300px; indicates the background image to be positioned 200px from the left side and 300px from the top of the browser window.
ii)background-position: top right; indicates that the image is positioned in the top-right corner of the page.
iii)background-position: 50% 25%; indicates that the image is centrally positioned and one fourth down the page.
7)background:
The property background is the short hand way for all the background properties that is discussed above.
With simply background attribute we can list all background properties in one lines and thus shorten the background property usage.
For example, we need to set up following attributes for our CSS.
background-color: #FF0022;
background-image: url("myimage.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Using background the same result can be achieved in just one line of code:
background: #FF0022 url("myimage.jpg") no-repeat fixed right bottom;
Remember the list of orders used in this background attribute,
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
And if any property is left out, it will automatically be set to its default value.
Related Documents
Diferent ways to apply CSS to an HTML document
No comments:
Post a Comment