With the advent of CSS3, the work of layout designers has become much easier and more logical: 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-repeat, background-attachment, background-origin, background-clip, background-color), and each of them can be written separately or combined under the background attribute. Let's take a closer look at each of them.
Background-color attribute
Even IE8 supports this method. Several images are used as backgrounds for fluid layout. The main thing, do not forget when using any image, also set in CSS color background, as users may simply not have a picture loaded.
Background-position attribute
If you are using an image to set the background of a block, CSS will allow you to position the image anywhere on the screen. By default, the image is positioned in the left upper corner... The attribute accepts either verbal indications (top, bottom, left, right) or numerical indications (percentages, pixels, and other units). In this case, you must specify two values: 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 top and bottom distances to the image are the same.
Background-size attribute
Sometimes required with using CSS stretch the background or reduce its size. For this, the background-size attribute is used, and the background size can be set both in pixels or percentages, and in any other units of measurement.
There are some problems with this attribute: for correct display background in earlier versions of browsers must use prefixes. Certainly, current versions fully support this attribute and the need for specific properties has disappeared.
Background-attachment attribute
This attribute specifies the scrolling behavior of the background image. So, it can take 3 values (excluding inherit, which is 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 image in the background scrolls if the content has scrolling. Backgrounds that go beyond the content are captured.
Usage example:
body (background-attachment fixed).
Firefox does not currently support the latter property (local).
Background-origin attribute
This attribute is responsible for the positioning of the element. Browsers early versions 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 binding it to the content.
If multiple values are given, browsers can react differently: Firefox and Opera only accept the first option.
Background-repeat attribute
Typically, if a background is defined by an image, it should repeat horizontally or vertically. This is what the background-repeat attribute is for. 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 is repeated along the x and y axes;
- repeat-x- only horizontally;
- repeat-y- only vertically;
- space- the background is repeated, but if the space cannot be filled, then voids appear between the pictures;
- round- the image is scaled if it is impossible to fill the entire area with whole pictures.
An example of using the attribute:
body (background-repeat: no-repeat repeat)- similarly background-repeat: repeat-y.
In CSS3, it is possible to set values for multiple images by listing parameters separated by commas.
Background-clip attribute
This attribute defines the behavior of the background below the borders (for example, in the case of dashed borders):
- padding-box- the background is displayed strictly inside the block;
- border-box- the image goes under the frames;
- content-box- the picture in the background only appears inside the content.
Usage example:
body (background-clip: content-box;).
Chrom and Safari require the -webkit- prefix.
Opacity and filter attributes
The opacity attribute allows you to set the transparency of the background - the CSS property will work in all browsers. The value is set in the range from 0.0 to 1.0 inclusive. With this, you can set the transparency CSS background without integer value: instead of 0.3 it is enough to write 3:
.block (background-image: url (img.png); opacity: .3;).
To set the transparency of the background, the CSS of which will work 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 is set between 0 and 100. Note that the opacity attribute is different from the opacity setting with using RGBA heredity: when used opacity transparent becomes not only the background, but also all the elements inside the block.
Always follow the statistics of the use of browsers in the CIS and all other countries. The most a big problem All layout designers are old versions of IE, they do not allow full use of CSS3. When making up, do not forget to use special services that check if your browser supports any CSS property... If you can not install old versions of browsers, find a service that will check the site in different browsers online.
Specifies the image to be used as background picture table cells. Unlike regular images, the background is not set to width and height, and is always displayed at full size and scaled to 100%. If the picture is less than the width or height of the cell in size, then the picture is repeated horizontally to the right and down, lining up like a mosaic. For this reason, at the junction background pictures there may be visible drops that are noticeable to site visitors. When choosing a background image, make sure there is sufficient contrast between it and the contents of the cell. It is also allowed to use animated images as a background. GIF format but they distract the readers' attention.
Syntax
The values
Any valid image address - you can use a relative or absolute path.
Default value
Example
| Cell with background pattern |
Note
To ask background image for the cell, use the background style property by adding it to the td or th selector.
| ... |
Browsers
The following conventions are used in the browser table.
- - the element is fully supported by the browser;
- - the element is not perceived by the browser and is ignored;
- - during operation, the appearance of various errors, or the item is supported with caveats.
The number indicates the browser version from which the element is supported.
I think there is not a single site where the property is not used CSS background
... It would seem that what could be simpler than this property? But no, its capabilities are much wider than the usual purpose of a picture or color as the background of the page. Something will be familiar, but something will surely become a novelty for many. In any case, it will be useful to know thoroughly how background works.
CSS3 has brought a lot of new things to the property, this is transparency, and assigning multiple images as a background, but we'll talk about that below, and first, we'll look at the basics of the property. background.
background-color
I'm pretty sure you have done background color assignments a number of times. This can be done using several types of notation: regular (the name of the color is used), hexadecimal or RGB notation. Each type is equal, use whichever you like best. I try to use the shortest version, and for the sake of perception it is simpler and the style file is a little smaller in size.
P (background-color: red;) p (background-color: # f00;) p (background-color: # ff0000;) p (background-color: rgb (255, 0, 0;))
There is transparency support in CSS3, so you can add it to our color, for example:
P (background-color: rgba (255, 0, 0, 0.5);)
The last digit was set to 50% transparency. You can set the transparency value from 0 (completely transparent background) to 1 (completely opaque).
background-image
This property is also used very often, it allows you to assign an image to the background. CSS3 adds the ability to assign multiple images to the background, each creating a kind of layer, so each subsequent one is superimposed on the previous one. Why might this be useful? Everything is quite simple - let's say you need to fasten the little things in each corner of the site. Provided more or less rubber layout using one image is not an option. Therefore, we make 4 "layers", we move each image to its own corner and that's it, the problem is solved
Body (background-image: url ("image1"), url ("image2"), url ("image3"))
If you need to assign one image to the background, we leave only the first in the code, I think this is understandable.
When using any image as a background, there are two rules to keep in mind:
- ask contrasting color background in case the user does not display a picture for some reason. It can turn off the display of images corny, saves traffic.
- do not use a background image to convey any important information... For the reason stated above, the user may not see it.
Support for multiple background images is broad enough. All browsers, even IE8, support this property.
