In this lesson you will learn how to use color and background on your web- sites. We will also consider advanced methods to position and control the background image. Will be explained in the following CSS- properties:
color
background-color
background-image
background-repeat
background-attachment
background-position
background
Foreground color: the 'color' property
The color property describes the foreground color of the element.
For example , imagine that we want to do all document titles , dark red . All titles are designated HTML- element <h1>. In the following code, color <h1> elements to red.
h1 {
color: # ff0000;
}
Show me an example
Colors can be entered as hexadecimal values , as in the example (# ff0000), or you can use the color names ("red") or rgb- value (rgb (255,0,0)).
The property 'background-color'
Background-color property describes the background color of the item.
The element <body> entire contents of HTML- document. Thus, to change the background color of the entire page background-color property to apply to a <body>.
You can also apply it to other elements , including - headlines and text . In the following example, a variety of background colors are applied to <body> and <h1>.
body {
background-color: # FFCC66;
}
h1 {
color: # 990000 ;
background-color: # FC9804;
}
Show me an example
Note that sets the two properties to <h1>, separating them with a semicolon.
The background image [background-image]
CSS- background-image property is used to insert a background image .
Below we use as a background image of a butterfly . You can download this image and use it on your computer ( right-click on the image and choose "save picture as / save image as"), or you can use a different image .
Butterfly
To insert the image of the butterfly as a background image web- page, simply apply background-image property to <body> and specify the location of the picture .
body {
background-color: # FFCC66;
background-image: url ("butterfly.gif");
}
h1 {
color: # 990000 ;
background-color: # FC9804;
}
Show me an example
NB: Please note that we specify the location where the file as a url ("butterfly.gif"). This means that he is in the same folder as the stylesheet . You can also refer to images in other folders , using, for example , url (".. / Images / butterfly.gif"), or even files on the Internet, specifying the full address of the file : url ("http:/ / www.html.net / butterfly.gif ").
Repeat / background image [background-repeat]
Have you noticed in the previous example , that the butterfly was repeated by default horizontally and vertically to fill the entire screen? Background-repeat property controls this .
The table shows the four values of background-repeat.
Value Description Example
Background-repeat: repeat-x The image is repeated horizontally by example
background-repeat: repeat-y The image is repeated vertically by example
background-repeat: repeat The image is repeated both horizontally and vertically by example
background-repeat: no-repeat figure is not repeated by example
For example, to avoid repetition of a / a background image we have to write code like this:
body {
background-color: # FFCC66;
background-image: url ("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: # 990000 ;
background-color: # FC9804;
}
Show me an example
Lock the background image [background-attachment]
Background-attachment property determines whether the background image is fixed or scrolls with the page content .
The table shows the values of the two background-attachment. Click on the examples to see the difference between scroll and fixed.
Value Description Example
Background-attachment: scroll image scrolls with the page - unlocked by example
Background-attachment: fixed image is locked by example
For example , the following code captures the image .
body {
background-color: # FFCC66;
background-image: url ("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: # 990000 ;
background-color: # FC9804;
}
Show me an example
The location of the background image [background-position]
By default, the background image is positioned in the upper left corner of the screen . Background-position property allows you to change this default value , and wallpaper can be placed anywhere on the screen .
There are many ways to set the background-position. However , they represent a set of coordinates. For example , the value '100px 200px ' positions the background image 100px and 200px from the left on top of the browser window .
The coordinates can be specified as a percentage of the screen width , fixed units (pixels , centimeters, etc.) , or you can use the words top, bottom, center, left and right. The model below illustrates this :
The table below gives a few examples.
Value Description Example
background-position: 2cm 2cm image is positioned on the left and 2 cm by 2 cm above by example
background-position: 50% 25 % The image is centered and on fourth down by example
background-position: top right image is positioned in the upper right corner of the page by example
The example code background image in the bottom right corner of the screen :
body {
background-color: # FFCC66;
background-image: url ("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: # 990000 ;
background-color: # FC9804;
}
Show me an example
Shorthand [background]
The background is a part of all of the properties listed in this lesson .
On the background you can compress several properties and write your style in a short form , which facilitates the reading tables.
For example , look at these lines:
background-color: # FFCC66;
background-image: url ("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Using the background, the same result can be achieved in just one line of code:
background: # FFCC66 url ("butterfly.gif") no-repeat fixed right bottom;
The order of the properties of this element is as follows:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
If the property does not exist , it is automatically set to the default . For example, if the background-attachment ibackground -position is not present in this example :
background: # FFCC66 url ("butterfly.gif") no-repeat;
then these two unspecified properties will be assigned a default value - scroll and top left.
Комментариев нет:
Отправить комментарий