CSS background. Complete Guide

I think there is not a single site where the property would not be used css background. It would seem, what could be simpler than this property? But no, its possibilities are much wider than the usual setting of an image or color as a page background. Some will be familiar, and some will be new to many. In any case, it will be useful to know thoroughly how background works.

CSS3 brought a lot of new things to the property, such as transparency, and setting multiple images as a background, but we will talk about this below, but first we will cover the basics of the property background.

background color

I'm pretty sure you've done the background color assignment multiple times already. This can be done using several types of notation: regular (the color name is used), hexadecimal or RGB notation. Each type is equivalent, use whichever you like best. I try to use the shortest version, and for the 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;))

CSS3 introduces transparency support, so we can add it to our color, like this:

P (background-color: rgba(255, 0, 0, 0.5);)

The last digit set the transparency to 50%. You can set the transparency value from 0 (fully transparent background) to 1 (fully 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 a background, each creating a kind of layer, so each subsequent one overlaps the previous one. Why might this be useful? Everything is quite simple - let's say you need to screw little things in each of the corners of the site. Under the condition of more or less fluid layout, using one image is not an option. Therefore, we make 4 “layers”, 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 one in the code, I think this is understandable.
When using any image as a background, there are two rules to remember:

set a contrasting background color in case the user does not see the image for some reason. It can tritely disable the display of pictures, 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 quite extensive. All browsers, even IE8, support this property.

brief information

CSS versions

Values

url The value is the path to the graphic file, which is specified inside the url() construct. In this case, the path to the file can be written both in quotes (double or single), and without them. none Cancels the background image for the element. inherit Inherits the value of the parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

background image

Object Model

document.getElementById("elementID ").style.backgroundImage

Browsers

Internet Explorer up to and including version 7.0 applies a background to the inside of the border of an element that has the hasLayout property set. If the element does not have a hasLayout , the background-image property will respect the element's borders, as specified in the specification. The difference in rendering will be noticeable if the borders are dashed (dashed or dotted ) rather than solid.

If the element is set to scroll or auto , Internet Explorer 8 will have a vertical delay of one pixel when the background scrolls.

Internet Explorer up to version 7.0 does not support the inherit value.

If the background is set for a table row (tag ), then Chrome, Safari, iOS display it differently than the specification prescribes, namely for each cell separately. Whereas the browser should show a solid background for the entire row. Example 2 shows the code that demonstrates the error.

HTML5 CSS2.1 IE Cr Op Sa Fx

Background for TR

Result this example in the Chrome browser is shown in Fig. one. Internet browser Explorer, Opera and Firefox correctly display the background for the row (Fig. 2).

Rice. 1. Repeat background for each cell

Rice. 2. Background for the entire line

Hello, dear readers of the blog site. Today we will look at five CSS rules that allow you to set the background for any element in Html - background-position (image, repeat, color, attachment). Well, let's not forget to mention the Background compound rule.

There is nothing difficult about this, but there are certain subtleties and nuances that you need to know about a ready-made template (remember about it, which will help you open all the ins and outs of any design).

Let me remind you once again that this article is part of a series and it would be best to start studying style markup from the beginning, namely from an article about what CSS is and what it is eaten with, well, then follow in the order given in the reference book. Although, in any case, it's up to you, but now let's talk about setting the background.

Color, background-color and background-image

Let's first see how the color of Html elements is set using css color rules. In fact, everything is simple here. The syntax is completely normal and you can set the color in accordance with the way it was done in the hypertext markup language. As you remember, placed after the hash sign (hash - “#fe35a3”), or with the help of three digits, if the first matches the value of the second, the third with the fourth, well, and the fifth, respectively, with the sixth (color code “#aa33ff” can be abbreviated as "a3f").

Also, colors in Html and Css code can be represented as words (for example, “red”), but the hexadecimal code is most often used:

Color:#303

As an example, I've colored this little paragraph the same color as above (#303). It is now slightly different from the color of all the other paragraphs (darker), which is set to #555 in the CSS file of the WordPress theme I'm using. But setting the color through color is quite simple, but with the background it will be a little more complicated.

So, for background in css meet five rules, which, if desired, can be combined into one team. To see them, you can go to the current W3C specification page and search there for something with the word Background:

background color - this rule sets the background color for any Html element. You can use either the code or the name of the shade in it, i.e. everything is exactly as it was when using color.

background image - with it, you can use an image as a background (but be sure to read about it, because heavy images will slow down page loading), the path to which will be indicated in the url () functionality.

If you look at the specification, you will see that default background color any element will be transparent (the default value of the rule is "background-color:transparent"). True, in the elements it will not be transparent by default, because. these are system elements and everything is different for them and differs from ordinary hypertext markup language tags.

The color in the background-color is set as standard (six or three hexadecimal digits, or a word):

Background-color:#FEFCDE

For example, the background of this paragraph is set precisely through background-color with the color code given just above.

All the other four CSS rules will only apply to the background image, which can be set for any Html element and, if desired, positioned exactly. Which graphic file will be used can be specified using background image.

If you look at the style markup language specification, you'll see that background-image defaults to "none" (i.e., no background image is used). Well, if you still need it, then in the url () functionality you will need to specify the path to it:

Background-image:url(https://site/image/comment_top_focus.gif);

For example, for this paragraph, I used a graphic file with a background, the path to which is described just above. You can see that the entire area reserved for this paragraph is covered with a repeating image, which in the original looks like this:

Those. when using only one background-image rule specifying the path to the graphic file, this very image will be reproduced both vertically and horizontally until it covers the entire area allocated on the web page for this specific Html element (in our example, it was a paragraph). Why is this happening?

Background-repeat - repeat background image

Yes, because we did not write any value for the CSS rule background-repeat, which means that the default value will be used for it. Looking at the specification, we find out that this value corresponds to "repeat" (repeating the image in all axes). The answer came by itself.

Therefore, with background-repeat we can manage background image repeats. This rule can only have four values:

Background-position - position of the background

Now the question arises, is it possible to move the background image away from the upper left corner of the area limiting the size of the element. Of course, you can, and for this purpose there is a separate rule background position:

Looking at the CSS specification, it becomes clear why the default background image is pressed exactly to the top left edge of the Html element area. Because the value "0% 0%" is the default for the background position rule.

Well, when this rule is not explicitly set for the element (as in our case), then the browser selects its value, which is accepted in the default specification (I note that the coordinate axes in CSS are reported just from the upper left edge of the area element).

It can also be seen from the specification that both relative (percentage) and absolute values (for example, ) can be used to position the background image using background-position. Well, you can also use words that will correspond to certain digital values. But first things first.

When setting the position of the background image using absolute units background-position has the following principle for determining its final position:

Those. the browser will calculate the specified offsets along the X and Y axes from the origin of the area in which the object is positioned to the origin of this image itself. For example, in this paragraph, I positioned the background image via background position using the following CSS rules:

Background-image:url(https://website/image/logo.svg); background-repeat:no-repeat; background-position:400px 25px;

Please note that it is in this case will be aligned to the center of the viewport, not to the center of the area reserved for these paragraphs. It is clear that in reality such placement of a background image is unlikely to be used.

However, if you set a fixed background position for elements such as Body or Html (i.e., in tags that cover the entire web page), then this picture will always be visible in the viewport and this is exactly how it is used. CSS property background-attachment in modern block layout.

Is there some more Prefab Rule Background, which allows you to combine all five of the rules described above in one bottle. Moreover, the values for all five in the combined version can be used in any order and in any quantity (they are unique and the browser will not confuse them with each other). Anything you don't explicitly specify will be considered by the browser as the default value.

Png) no-repeat 50%;

The assembly rule shown in the example is applied to this paragraph for clarity. It didn't turn out pretty, but that's not the point. This paragraph uses a strange yellow background color and uses an image of the LiveInternet logo aligned to the center of the paragraph. Because for the background-attachment rule, no value is set, then scroll (the default) is used.

If for some element you want to set only the fill with color, and don’t bother with the background image, then you can do it instead:

Background-color:#FEFCDE

write:

Background:#FEFCDE

For all other values of the prefabricated rule will be taken by default, and this is what you needed.

Good luck to you! See you soon on the blog pages site

Is it possible to get by with html when setting the background?

I'll tell you right now that it's not. In general, html is not designed to design web pages. It's just very inconvenient. For example, there is a bgcolor attribute that can be used to set the background color, but this is very inconvenient.

Accordingly, we will use cascading style sheets (css). There are many more options for setting the background. Today we will analyze the most basic ones.

How to set background with css?

So, first of all, you need to decide which element you want to set the background to. That is, we need to find the selector to which we will write the rule. For example, if you need to set the background for the entire page as a whole, then you can do this through the body selector, for all blocks through the div selector. Well, etc. The background can and should be attached to any other selectors: style classes, identifiers, etc.

After you have decided on the selector, you need to write the name of the property itself. To set the background color (namely, a solid color, not a gradient and not an image), the background-color property is used. After it, you need to put a colon and write the color itself. This can be done in different ways. For example, using keywords, hex code, rgb, rgba, hsl formats. Any method will do.

The most commonly used method is the hexadecimal code. To select colors, you can use a program in which you can see the color code. For example photoshop, paint or some online tool. Accordingly, for example, I will prescribe a common background for the entire web page.

body( background-color: #D4E6B3; )

This code needs to be inserted in the head section. It is important that the files are in the same folder.

Picture as background

For the picture, I will use a small html language icon:

Let's create an empty block with an ID:

< div id = "bg" > < / div >

Let's give it explicit dimensions and a background:

#bg( width: 400px; height: 250px; background-image: url(html.png); )

#bg(

width : 400px

height: 250px

background-image : url (html . png ) ;

From this code, you can see that I have used a new property called background-image. It is intended just for inserting an image as a background to an html element. Let's see what happened:

To specify an image, you must write the keyword url after the colon, and then specify the path to the file in parentheses. In this case, the path is specified based on the fact that the image is in the same folder as the html document. You also need to specify the image format.

If you have done this, and the background is still not displayed in the block, check again if you wrote the name of the image correctly, if the path and extension are set correctly. These are the most common reasons why the background is simply not displayed, because the browser cannot find the image.

But did you notice one feature? The browser took and multiplied the picture throughout the block. So, just so you know, this is the default behavior of background images - they repeat vertically and horizontally as long as they can fit into the block. By this behavior you can easily manage. To do this, use the background-repeat property, which has 4 main values:

Repeat - the default value, the image is repeated on both sides;

Repeat-x - repeats only on axis x;

Repeat-y - repeats only along the y axis;

No-repeat - does not repeat at all;

You can write each value and see what happens. I will write like this:

background-repeat: repeat-x;

background - repeat : repeat - x ;

Now repeat only horizontally. If you write no-repeat, then there would be only one picture.

Great, we can finish with this, since these are the basic features of working with the background, but I will show you 2 more properties that allow you to get more control options.

With repetition, coders used to achieve the point of creating background textures and gradients using one tiny image. It could be 30 by 10 pixels or even smaller. Or maybe a little more. The image was such that when it was repeated on one or even both sides, no transitions were visible, so that in the end a single solid background was obtained. By the way, this approach is worth using now if you want to use a seamless texture on your site as a background. The gradient today can already be implemented using css3 methods, we will definitely talk about this later.

Background position

By default, the background image, if it is not set to repeat, will be in the upper left corner of its block. But the position can be easily changed with the background-position property.

You can ask it in different ways. One option is to simply specify the sides in which the image should be:

background-position: right top;

background - position : right top ;

That is, everything remained the same vertically: the background image is located on top, but horizontally we changed the side to right, that is, the right one. Another way to set the position is as a percentage. In this case, the countdown starts in any case from the upper left corner. 100% - the whole block. Thus, to place the image exactly in the center, we write it like this:

background-position: 50% 50%;

One important thing to remember about positioning is that the first parameter is always the horizontal position, and the second parameter is the vertical position. So, if you see a value of 80% 20%, then you can immediately conclude that the background image will be strongly shifted to the right, but it will not go down much.

And finally, you can specify the position in pixels. Everything is the same, only instead of % there will be px. In some cases, such positioning may also be necessary.

Abbreviated notation

Agree that the code turns out to be quite cumbersome if everything is set the way we did it. It turns out that the path to the picture needs to be set, and the repetition, and the position. Of course, repetition and position is not always necessary, but in any case, it would be more correct to use the property shorthand. She looks like this:

background: #333 url(bg.jpg) no-repeat 50% 50%;

background : #333 url(bg.jpg) no-repeat 50% 50%;

That is, the first step is to record the overall solid background color, if necessary. Then the path to the image, repetition and position. If some parameter is not needed, then simply omit it. Agree, this is much faster and more convenient, and we also significantly reduce our code. In general, I advise you to write abbreviated always, even if you need to specify only a color or a picture.

Controlling the size of the background image

Our current image doesn't lend itself very well to the next trick, so I'll take a different one. In size, let it be like a block or larger than it. So, imagine that you are faced with the task of making a background image so that it does not completely fill its block. And the picture, for example, is even larger than the size of the block.

What can be done in such a case? Of course, the simplest and most reasonable option would be to simply reduce the image, but it is not always possible to do this. Let's say it lies on the server and in this moment there is no time and opportunity to reduce it. The problem can be solved with the help of the background-size property, which can be called relatively new and which allows you to manipulate the size of the background image, and indeed any background.

So, my image now takes up all the space in the block, but I will give it a background size:

background-size: 80% 50%;

Again, the first parameter is the horizontal size, the second is the vertical size. We see that everything has been applied correctly - the photo has become 80% of the block width in width and half in height. Here you only need to make one clarification - by setting the size as a percentage, you can affect the proportions of the picture. So be careful if you want not to break the proportions.

As you might guess, the background size can also be specified in pixels. There are also two value keywords that can also be used:

Cover - the image will be scaled so that at least one side of it completely fills the block.

Contain - scales so that the image fits completely into the block at its maximum size.

The advantage of these values is that they do not change the proportions of the picture, leaving them the same.

Also, you should understand that stretching the picture can lead to a deterioration in its quality. I can give an example from the life and real practice of layout designers. Everyone knows and understands that when designing for desktops, you need to adapt the site to the main monitor widths: 1280, 1366, 1920. If you take a background image sized, say, 1280 by 200, and do not set background-size for it, then screens with a width larger than an empty space appears, the picture will not fill the width completely.

In 99% of cases, this does not suit the web developer, so he sets background-size: cover so that the image always stretches to the maximum width of the window. This is a good trick to use, but now you will run into the problem that users with a screen width of 1920 pixels may see a sub-optimal image quality.

I remind you that it will stretch to the maximum width. Accordingly, the quality will automatically deteriorate. The only correct solution here would be to initially use a larger image - 1920 pixels wide. Then on the widest screens it will be in its natural size, and on others it will simply be cut off slowly, but at the same time, with a competent selection of the background image, on appearance site will not be affected.

All in all, this is just 1 example of how to apply the knowledge you have gained in this article to real-life layouts.

translucent background with css

Another feature that can be implemented with css – translucent background. That is, through this background it will be possible to see what is behind it.

As an example, I'll set the background of the entire page to the image we used earlier in the examples. For the block with the bg identifier, on which we conduct all our experiments, we will set the background using the rgba color setting format.

As I said earlier, there are many formats in css for setting colors. One of them is rgb, a fairly well-known format for those who work in graphic editors. It is written like this: rgb(17, 255, 34);

The first value in brackets is the saturation of red, then green, then blue. The value can be numeric from 0 to 255. Accordingly, the rgba format is no different, only one more parameter is added - the alpha channel. The value can be from 0 to 1, where 0 is full transparency.