Background in CSS (color, position, image, repeat, attachment) - all for setting the background color or background image of Html elements. CSS Background. The Complete Guide to Repeating a css Image

From the author: I welcome everyone. Background colors and images play a huge role in web design, as they allow any elements to be more attractively decorated. Today we will look at how to make a background in html.

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

I must say right away that no. Generally html is not designed to style web pages. It's just very uncomfortable. For example, there is a bgcolor attribute with which you can set the background color, but this is very inconvenient.

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

How do I set the background via css?

So, first of all, you need to decide on which element you need to set the background. That is, we need to find the selector to which we will write the rule. For example, if the background needs to be set 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 bound to any other selectors: style classes, identifiers, etc.

After you've decided on the selector, you need to write the name of the property itself. To set the background color (just a solid color, not a gradient or an image), use the background-color property. 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. For color matching, you can use a program that shows the color code. For example photoshop, paint or some online tool. Accordingly, for example, I will write a general background for the entire web page.

body (background-color: # D4E6B3;)

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

Picture as background

I will use a small html language icon as a picture:

Let's create an empty block with an identifier:

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

Let's give it explicit dimensions and 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 - background-image. It is intended just for inserting a picture as a background for an html element. Let's see what happened:

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

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

But have you noticed one peculiarity? The browser took and reproduced the image throughout the block. So, so that you know, this is the default behavior of background images - they are repeated vertically and horizontally until they can fit into the block. You can easily control this behavior. To do this, use the background-repeat property, which has 4 main values:

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

Repeat-x - repeats only for ois 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 it like this:

background-repeat: repeat-x;

background - repeat: repeat - x;

Now repeat only horizontally. With no-repeat, there would be only one picture.

Great, you can finish this already, since these are basic possibilities for working with the background, but I will show you 2 more properties that allow you to get more control over it.

With repetition, layout designers used to achieve background textures and gradients using one tiny image. It could be 30 pixels by 10 pixels or less. Maybe a little more. The image was such that when it was repeated on one or even on both sides, no transitions were visible, so that as a result, 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. Today, the gradient can already be implemented using css3 methods, we will definitely talk about this.

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 using the background-position property.

You can ask it in different ways. One of the options is simply to indicate the sides in which the picture should be located:

background-position: right top;

background - position: right top;

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

background-position: 50% 50%;

background - position: 50% 50%;

Remember one important thing related to positioning - the first parameter is always the horizontal position, and the second 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.

Finally, you can write the position in pixels. Everything is the same, but instead of% there will be px. In some cases, this 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 must be set, and the repetition, and the position. Of course, repetition and position are not always necessary, but in any case, it is more correct to use the shorthand property. It looks like this:

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 we simply omit it. Agree, this is much faster and more convenient, and we also significantly reduce our code. In general, I advise you to always write in abbreviations, even if you only need to specify a color or a picture.

Controlling the size of the background image

Our current image is not well suited for the next trick, so I'll take another one. In size, let it be like a block or larger than it. So, imagine that you are faced with a task: to make a background image so that it does not fill its block completely. And the picture, for example, is even larger than the block size.

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

So, my picture now takes up all the space in the block, but I'll give it a background size:

background-size: 80% 50%;

background - size: 80% 50%;

Again, the first parameter is the horizontal size, the second - the vertical size. We can see that everything was applied correctly - the photo became 80% of the block's width in width and half in height. Here you just need to make one clarification - by setting the size in percentage, you can affect the proportions of the picture. So be careful not to get out of proportion.

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

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

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

The advantage of these values \u200b\u200bis that they do not change the aspect ratio of the picture, leaving them the same.

Also, you should understand that stretching the image 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 coding for desktops, you need to adapt the site to the main widths of monitors: 1280, 1366, 1920. If you take a background image with a size of, say, 1280 by 200, and do not set it a background-size, then screens with a width are larger an empty space will appear, 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 picture always stretches to the maximum width of the window. This is a good trick to use, but now you are faced with the problem that users with a screen width of 1920 pixels can see a picture of sub-optimal quality.

Let me 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 picture - 1920 pixels wide. Then on the widest screens it will be in its natural size, while on others it will simply be cut off slowly, but at the same time, with the correct selection of the background image, this will not affect the appearance of the site.

In general, this is just 1 example of how to use the knowledge you gained in this article when making up real layouts.

Semi-transparent background with css

Another trick that can be implemented using css is a semi-transparent background. That is, through this background it will be possible to see what is behind it.

As an example, I will set the entire page as the background image that we used earlier in the examples. For the block with the bg identifier, on which we carry out all our experiments, we will set the background using the rgba color 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 parentheses 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.

short information

CSS versions

The values

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

HTML5 CSS2.1 IE Cr Op Sa Fx

background-image

Object Model

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

Browsers

Internet Explorer 7.0 or later applies a background to the inside of the border of an element that has its 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 spec. The difference in display will be noticeable if the borders are dashed or dotted rather than solid.

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

Internet Explorer 7.0 or later does not support the inherit value.

If the background is set for a table row (tag ), then Chrome, Safari, iOS do not display it as prescribed by the specification, namely for each cell separately. Whereas the browser should show a solid background for the entire row. Example 2 shows the code to demonstrate the error.

HTML5 CSS2.1 IE Cr Op Sa Fx

Background for TR

The result of this example in the Chrome browser is shown in Fig. 1. Browser Internet Explorer, Opera and Firefox display the background for the line correctly (Fig. 2).

Figure: 1. Repeating the background for each cell

Figure: 2. Background for the entire line

I think there is not a single site where the property is not used CSS background... It would seem, 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 a page. Something will be familiar, but something will surely become a novelty for many. In any case, it will be useful to thoroughly know how background works.

CSS3 has brought a lot of new things to the property, this is transparency and the assignment of multiple images as a background, but we'll talk about that below, and first let's 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 (color name is used), hexadecimal or RGB notation. Each type is equal, use whichever you like best. I try to use the shortest option, 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;))

CSS3 has support for transparency, so you can add it to our color too, like this:

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, and each creates 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. Given a more or less fluid 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.
There are two rules to keep in mind when using any image as a background:

set a contrasting background color in case the user cannot 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.

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 that 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 learning style markup first, namely with an article about what CSS is and what it is eaten with, well, and then follow in the order given in the reference. 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 the 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 how it was done in the hypertext markup language. As you remember, placed after the hash sign (hash - "# fe35a3"), or using 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 in the same color as above (# 303). It is now slightly different from the color of all other paragraphs (darker), which is set as # 555 in the CSS file of the WordPress theme I am 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 there are five rules that, if desired, can be combined into one team. To see them, you can go to the page of the current specification of the W3C consortium and search there for anything with the word Background:

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

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

If you look at the spec, you will see that default background color any element will be transparent (the default value of the rule is "background-color: transparent"). However, in elements it will not be transparent by default, since these are system elements and they have everything differently and different from the usual tags of the hypertext markup language.

The background-color 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 the background-color with the color code given just above.

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

If you look at the style markup language specification, you will see that the default background-image is "none" (ie no background image is used). Well, if you still need it, then in the url () functional 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 allotted for this paragraph is covered with a repeating image, which in the original looks like this:

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

Background-repeat - repeat the 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 along all axes). The answer came up by itself.

Therefore, with background-repeat we can manage repetitions of the background picture... This rule can only have four values:

Background-position - positioning 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 nestled exactly to the top-left edge of the Html element's area. Because the value "0% 0%" is the default for the background position rule.

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

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

When setting the positioning of the background image using absolute units the 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 very image. For example, in this paragraph, I have positioned the background image via background position using the following CSS rules:

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

Please note that in this case it will be aligned to the center of the viewport, and not to the center of the area allocated for these paragraphs. It is clear that in reality such an arrangement of the background image is unlikely to find application.

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 what the background-attachment CSS property finds in modern block layout.

Is there some more prefab rule Background, which allows you to combine all five rules described above in one bottle. Moreover, the values \u200b\u200bfor 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 that you do not specify explicitly, the browser will consider equal to the default value.

Png) no-repeat 50%;

The assembly rule shown in the example is applied to this paragraph for clarity. It turned out not beautiful, but this is not the main thing. For this paragraph, a strange yellow background fill is used, as well as an image of the LiveInternet logo, aligned to the center of the paragraph. Because no value is specified for the background-attachment rule, then the default scroll value is used.

If for some element you want to set only a fill with color, and do not bother with the background image, then you may well instead:

Background-color: #FEFCDE

write:

Background: #FEFCDE

For all other values \u200b\u200bof the combined rule will be taken by default, and this is what you needed.

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