| Many definitions are taken as is or simplified on the recommendation of the W3C Cascading Style Sheets, Level 2 Revision 1 (CSS2.1), which are in Section HTML / CSS, this site. |
| With regard to the texts of our HTML document, in the CSS we have the color property for viewing, as its name indicates, in different colors. Although I have already spoken of this property in a previous tutorial, I will repeat now its definition, to have it in the appropriate chapter. |
| |
 COLOR
|
| Property that determines the color of the font text. It can be a keyword or a numerical RGB (Red, Green, Blue). The keywords correspond with the numerical values that represent, but you can select the code number you want (Usually use any software of graphics edition to visually choose the color that we like and then see the numerical code applicable). |
|
 The list of keywords with values are: |
|
maroon #800000, red #ff0000, orange #ffA500, yellow #ffff00, olive #808000, purple #800080, fuchsia #ff00ff, white #ffffff, lime #00ff00, green #008000, navy #000080, blue #0000ff, aqua #00ffff, teal #008080, black #000000, silver #c0c0c0, gray #808080. |
| |
|
| The following image shows the CSS code to define two labels of two colors, and its application in two types of header. All the code appears in the same HTML document, but as you will know, everything between the < STYLE > and < / STYLE > could go into a document .css apart. |
 |
| And the result is this: |
 |
| It would also be valid to change the names of colors, for example 'red' by its code number #ff0000. |
| For the backgrounds, we have a few more options on the property BACKGROUND. Not only can we define the color of it (I have also explained that property before) but could also put a picture and set certain parameters. |
| Let's start with the background-color property and then we will be completing the remaining options. |
| |
BACKGROUND-COLOR |
| This property sets the background color of an item. |
|
value: |
|
the keyword that defines the color, such as 'red' or a 6-character hexadecimal code (#ffffff). |
|
keyword -transparent- |
|
to make the underlying colors are through. |
| |
|
| Here is another example with two boxes (DIVs) for you shall see the effect of the background-color. |
 |
| And the result is this: |
 |
| Come with the following property: |
| |
BACKGROUND-IMAGE |
| This property sets the background image of an item. If the image wouldn't exist, in its place you would see the background color specified in Background-color. The same color will be seen under the transparent parts of the chosen image (if it has transparent parts). This is because the image is placed on the background color, and not under it. |
|
value: |
|
url( < uri > ). (URI is the address where the image is), to specify the image. |
|
keyword -none- |
|
when not in use any image. |
| |
|
| We will use this picture: |
 |
| to put as the background of the box "recuadro" with yellow background color. The image is called fondo.jpg. This is the code: |
 |
| Click on this link ' EXAMPLE ' to see the result. |
| What has happened? Well, the image appears as a background inside the box "recuadro". But as you can see, not a single image. This is because the image being smaller than the background of the box, it automatically will be repeated horizontally and vertically until the complete occupation of the background of the box that contains it. This is called "mosaic". |
| If the image is greater than the space we have in the box "recuadro" only a portion of it would be seen to come into the box. Note also that the yellow color, although still defined in the CSS code, it is not seen, because as I said before, the image is positioned on the background color, and unless the image has transparent parts, it is not shown. |
| What happens if I only want to leave an image and not the mosaic? |
| Well, for that we need the following property: |
| |
BACKGROUND-REPEAT |
| If you specify a background image with background-image property, this property specifies whether the image is repeated (mosaic), and how. The whole mosaic covers the content area, padding and border of a box. |
|
repeat |
|
The image is repeated horizontally and vertically (by default). |
|
repeat-x |
|
The image is repeated horizontally only. |
|
repeat-y |
|
The image is repeated vertically only. |
|
No-repeat |
|
The image is not repeated: only a copy of the image is drawn. |
| |
|
| We use the example above but now we specify a repeat-x. |
 |
| Click on this link ' EXAMPLE ' to see how the mosaic is now only horizontal, and below the horizontal images you can see the yellow background color specified BACKGROUND-COLOR. |
| Test yourself if no-repeat just to see a single copy of the image appears in the box. |
| We continue with more properties BACKGROUND. |
| |
BACKGROUND-POSITION |
| If you specify a background image with background-image, this property specifies its initial position. |
|
< percentage > < percentage > |
|
With the values'0% 0% ', the upper left corner of the image is aligned with the upper left corner of the padding edge of the box. |
|
Values '100% 100%' places the lower right corner of the image in the lower right corner of padding area. |
|
With the values of '10% 30%', a point located at the left side 10% and 30% down the image must be placed in the left side 10% and 30% down area padding (ATTENTION TO THIS. THE PERCENTAGE IS APPLIED TO THE IMAGE AND TO THE SPACE (AREA) WHERE IT IS LOCATED). |
|
< measure > < measure > |
|
With a par value of' 2px 2px ', the upper left corner of the image is 2 pixels to the right and 2 pixels below the upper left corner of padding area. |
|
< keywords TOP, BOTTOM, LEFT, RIGHT, CENTER > |
|
Top left and left top: Equal to '0% 0%'. |
|
Top, top center and center top: Equal to '50% 0%'. |
|
Right top and top right: Equal to '100% 0%'. |
|
Left, left center and center left: Equal to '0% 50%'. |
|
Center and center: Equal to '50% 50%'. |
|
Right, right center and center right: Equal to '100% 50%'. |
|
Bottom left and left bottom: Equal to '0% 100%'. |
|
Bottom, bottom center and center bottom: Equal to '50% 100%'. |
|
Bottom right and right bottom: Equal to '100% 100%'. |
| |
|
| If there is only a value of percentage or measure, it just sets the horizontal and vertical position is 50% of area. |
| If there are two values, the horizontal position comes first. |
| The combinations of the values of the keyword, measure and percentage, are permitted, (Ex.,'50% 2cm' or 'center 2cm' or 'center 10%'). |
| For combinations of keywords values and no keywords values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as a second value. |
| Negative positions are allowed, which makes the image moves out of the box, in the opposite direction (ie upwards or left). |
| For the background-repeat, the position marks the beginning of the image, but the repetition will occupy the entire width or height (as repeat-x or repeat-y) of the box container. |
| The following code shows the various possibilities for this property. Recuadro1 with percentages. Recuadro2 with fixed measures. Recuadro3 to repeat. |
 |
| In this ' EXAMPLE ' you can see its implementation. |
| |
BACKGROUND-ATTACHMENT |
| If you specify a background image with background-image, this property specifies its behavior with regard to the displacement of the block that contains it. |
|
< keyword FIXED > |
|
The image remains stationary (and in relation to the screen, not with respect to its containing box). |
|
palabra clave < keyword SCROLL > |
|
The image is shifted with respect to the block that contains it (the default option). |
| |
|
| Click this ' EXAMPLE 'to see the operation of this property. Move the vertical scroll bar of the window to see the differences between the two boxes. |
| IMPORTANT NOTE: Observe that there is only one visual access for option. If an element has a displacement mechanism (overflow), the background 'fixed' does not move with the item, and background a 'scroll' does not move with the mechanism of displacement. |
| This means that if we define a DIV, and within we position an image, with FIXED attribute the image is fixed with respect to the displacement of the browser window as well, not only with respect to the scroll bar that exists in that span. |
| In the same way, referring to the same DIV, if we position the image with SCROLL, the image is moved with respect to the displacement of the browser window, and not with the displacement of the DIV. |
| (The irregular behavior is different between browsers. As far as I've seen in the Firefox SCROLL is not executed in the DIV, and in IExplorer and Firefox do not maintain the image fixed to move the browser window ). |
| Look at the following drawing |
 |
| and run this ' EXAMPLE 'opening the browser in windowed mode and with a height less than the size of two rectangles. As before, move the vertical scroll bar of the window and both boxes to see the differences between the two boxes and analyzes their bad behavior. |
| |
BACKGROUND (BACKGROUND-COLOR, BACKGROUND-IMAGE, BACKGROUND-REPEAT, BACKGROUND-ATTACHMENT, BACKGROUND-POSITION) |
| This property permits to declare in one sentence all properties BACKGROUND explained above. |
| The order of values is as shown in the statement. |
| |
|
| Can be used with a single value or more as shown by these examples: |
| #divprincipal { background: blue;} |
| P { background: url("fondo1.jpg") black 50% no-repeat fixed;} |
Español
English
