With the advent of CSS3, layout work has become much easier and more logical: in fact, now you can really flexibly customize any object, using JavaScript less and less. Let's say you need to adjust the transparency of the background - CSS immediately offers several options.
The background is set by a set of attributes (background-image, background-position, background-size , background-repeat, background-attachment, background-origin, background-clip, background-color), and each of them can be registered separately or combined under the attribute background. We will analyze each of them in more detail.
Background-color attribute
In CSS , the background color can be set in several ways: using a hexadecimal code, a color name, or an RGB record. In CSS3, it has become possible to use the RGBA option instead of an RGB record.
The hexadecimal color code is written in the property after the lattice: background-color: # FFDAB9. If the characters in such an entry match in pairs, the code is usually slightly reduced: # ccff00 can be written as # cf0:
body {background-color: # cf0;}.
Even the most exotic flowers have a name. For example, in addition to the standard red and white, you can use NavajoWhite (#FFDEAD) or Honeydew2 (# E0EEE0):
body {background-color: purple;}.
The latest version of RGB or RGBA recording allows you to specify not only the color, but also the transparency of the CSS background, however, the method works in IE only older than version 9. Other browsers normally recognize the option with transparency. By W3C standards, it is preferable to use still RGBA instead of the more familiar RGB.
The last value is RGBA and sets the background opacity from 0 (transparent) to 1 (opaque).
There are some more unusual meanings. Background color can be set using HSL and HSLA. Both were added in CSS3, and therefore IE below version 9 is not supported. The options are identical to RGB or RGBA, only in a different format: Hue (hue - value on the color wheel, set in degrees), Saturate (saturation - color intensity in percent, from 0 to 100), Lightness (lightness - brightness, measured similar to Saturate parameter )
Background-image attribute
The most cross-browser version of a transparent background is the use of an image. In CSS3, you can even specify multiple images; this is done with a comma. Example:
body {background-image: url (bg1.png), url (bg2.png)}.
This method even supports IE8. Several images are used as a background for rubber typesetting. The main thing is to remember, when using any image, also set the background color in CSS, as users may simply not load the picture.
Background-position attribute
If you use an image to set the background of the block, CSS will let you position the image anywhere on the screen. By default, the image is located in the upper left corner. The attribute accepts either verbal indications (top, bottom, left, right), or numerical (percentages, pixels and other units of measurement). In this case, two values must be specified: horizontally and vertically:
body {background-position: right center;} - in this example, the background will be located on the right side of the page, and the distances to the image below and above are the same.
Background-size attribute
Sometimes it is required using CSS to stretch the background or reduce its size. To do this, use the background-size attribute, and the background size can be set both in pixels or percent, and in any other units of measure.
There are some problems with this attribute: to display the background correctly in earlier versions of browsers, you must use prefixes. Of course, current versions fully support this attribute and the need for specific properties has disappeared.
Background-attachment attribute
This attribute specifies the behavior of the background image when scrolling. So, it can take 3 values (not taking into account the inherit common to all the attributes presented in this article):
- fixed - makes the picture on the background motionless;
- scroll - the background scrolls along with the rest of the elements;
- local - the background image scrolls if the scroll has content. A background that goes beyond the content is fixed.
Usage example:
body {background-attachment fixed}.
Firefox does not currently support the last property (local).
Background-origin attribute
This attribute is responsible for positioning the element. Earlier browsers require the use of prefixes. The property itself has three parameters:
- padding-box positions the background relative to the edge, while taking into account the thickness of the frame;
- border-box differs from the previous property in that the border line can completely or partially overlap the background;
- content-box positions the image by linking it to the content.
If several values are specified, then browsers can react in their own way: Firefox and Opera perceive only the first option.
Background-repeat attribute
As a rule, if the background is set by the image, it should be repeated horizontally or vertically. For this, the background-repeat attribute is used. So, the background of a block whose CSS contains such a property can have one of several parameters:
- no-repeat - the image appears on the page in a single version;
- repeat - the background repeats along the x and y axes;
- repeat-x - only horizontally;
- repeat-y - only vertically;
- space - the background repeats, but if the space cannot be filled, voids appear between the pictures;
- round - the image is scaled if it is not possible to fill the entire area with whole pictures.
Attribute example:
body {background-repeat: no-repeat repeat} - similar to background-repeat: repeat-y.
In CSS3, it is possible to set values for multiple images by listing the parameters with a comma.
Background-clip attribute
This attribute defines the behavior of the background under the borders (for example, in the case of dashed frames):
- padding-box - the background is displayed strictly inside the block;
- border-box - the image goes under the frame;
- content-box - the picture on the background appears only inside the content.
Usage example:
body {background-clip: content-box;}.
Chrom and Safari require the use of the -webkit- prefix.
Opacity and filter attributes
The opacity attribute allows you to set the background transparency - the CSS property will work in all browsers. The value is set between 0.0 and 1.0 inclusive. With this you can set CSS background transparency without an integer value: instead of 0.3, just write .3:
.block {background-image: url (img.png); opacity: .3;}.
To set the transparency of the background, whose CSS is suitable even for IE below the ninth version, use the filter attribute:
.block {background-image: url (img.png); filter: alpha (opacity = 30);}.
In this case, the opacity value is set between 0 and 100. Note that the opacity attribute differs from the transparency setting using RGBA heredity: when using opacity, not only the background becomes transparent, but also all elements inside the block.
Always keep track of browser usage statistics for the CIS and all other countries. The biggest problem of all typesetters is the old versions of IE, and they do not allow full use of CSS3. When layout, do not forget to use special services that check whether your browser supports any CSS property. If you can’t install old versions of browsers, find a service that will check the site in different browsers online.