How to set background color in css. Background in CSS (color, position, image, repeat, attachment) - everything for setting the background color or background image of Html elements

With help CSS color and background You can assign it to almost any element of a web page, freely control the background image and its repetition horizontally and vertically. Besides, using CSS You can place the background image anywhere on the screen using positioning. Let's not get too far ahead for now, let's go in order.

COLOR property

This property specifies the color of the element, or more precisely, the color of the text inside the element. The value is specified in one of the possible forms:

color name (GREEN, BLACK, RED...);
hexadecimal color code (008000, 000000, FF0000...);
decimal color code in RGB (color:rgb (40, 175, 250));

The COLOR property is inherited, and if not set value For any element, the value is inherited from its ancestor. But it may happen that it is not set for the ancestor either - then the browser style sheet will be applied using the default values. The color of the element in this case will most likely be black.

As I already mentioned, you can set a color for almost all elements, these can be (H1... H6), (strong, em) and even integers (p) and even table borders, but more on that later.

Let's look at an example of setting text color using CSS:

h1 (color: Blue)

In this example, all the first level headings of the web page will be blue:

strong (color: red)

In this case, everything that is in the text of the page will be highlighted with the tag strong, will turn red.

You can write it like this:

h1, p, strong (color : green )

Then the first level headings, all paragraphs and everything that is highlighted with a tag will be green.

When does it become necessary to highlight headings? different colors, then class selectors are applied. To define a class in HTML, the attribute is used class, which can be applied to any elements. In the HTML code you will need to write:

class="Blue" > The header color of this class will be blue

In the CSS style sheet, in this case, we write a rule where the selector will be the H1 element, and through the dot ( . ) class name:

h1.Blue (color : blue )

In HTML documents, selectors by identifier are also used; they are determined by the attribute id. An identifier is a more significant or priority attribute than a class. And if both a class and an identifier are specified for an element in the HTML code, then the identifier style will be applied. The identifier is indicated by a hash sign ( # ). To use the identifier in HTML code, you will need to write:

id="Blue" > The header color of this ID will be blue

In the style sheet in turn:

h1#Blue (color : blue )

BACKGROUND-COLOR property

This property allows you to set the background color for the page as a whole, a paragraph, a link, or, in general, for any HTML element. To do this, the property value specifies a color or value transparent(transparent). The code for the page background is written:

body (background-color : aqua )

In this case, the background of the page will be turquoise, and to give the background to the header we write:

h1 (background-color: yellow)

We get a yellow background for the first level headings.

Color and background in CSS

BACKGROUND-REPEAT property

This property is used when set to determine whether it will repeat horizontally and vertically. Valid values:

repeat- the image is repeated vertically and horizontally;
repeat-x- the image is repeated only horizontally;
repeat-y- the image is repeated only vertically;
no-repeat- the image does not repeat.

The code is written like this:

p(
background-image : url( image file address) ;
background-repeat : repeat-x
}

The text of this paragraph will be on top of the background image, which will be positioned horizontally.

BACKGROUND-ATTACHMENT property

This property is used to indicate to the browser whether the page's background image should scroll with text ( scroll) or remain motionless ( fixed).

body (
background-image : url( image file address) ;
background-repeat : repeat-x ;
background-attachment : fixed
}

In this case, the background image will remain motionless.

BACKGROUND-POSITION property

This property is used to position the image relative to . Values are specified in percentages (%), in length units (cm, px), with keywords:

Vertically:

top- the top of the image is aligned to the top edge of the page or block;
center
bottom- the bottom of the image is aligned to the bottom edge of the page or block.

Horizontally:

left- the left edge of the image is aligned to the left edge of the page or block;
center- the center of the image is aligned to the center of the page or block;
right- the right edge of the image is aligned to the right edge of the page or block.

We write an example code in percentages, length units and keywords:

body (
background-image : url( image file address) ;
background-position : 0% 0%
}

Body (
background-image : url( image file address) ;
background-position : 10px 25cm
}

Body (
background-image : url( image file address) ;
background-position : top center
}

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

There is nothing complicated about this, but there are certain subtleties and nuances that you need to know and already ready-made template(remember about, which will help reveal 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 with an article about what CSS is and what it is used with, and 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 to set HTML color elements 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 language hypertext markup. As you remember, placed after the hash sign (hash - “#fe35a3”), or using three digits, if the first coincides with the value of the second, the third with the fourth, and the fifth, respectively, with the sixth (color code “#aa33ff” can be briefly written as "a3f").

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

Color:#303

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

So, for the background in Css There are five rules that can be combined into one if desired. To see them, you can go to the current W3C specification page and look for anything with the word Background:

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

background image - with it you can use a picture as a background (but be sure to read about it, because heavy pictures will slow down the loading of pages), 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 elements it will not be transparent by default, because This system elements and with them everything is different and different from ordinary hypertext markup language tags.

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

Background-color:#FEFCDE

For example, the background of this paragraph is specified using background-color with the color code given just above.

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

If you look at the markup language specification, you'll see that background-image defaults to "none" (i.e., no image is used for the background). Well, if you still need this, then in the url() functionality you will need to indicate 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 see that the entire area allocated 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 same image will be multiplied both vertically and horizontally until it covers the entire area allocated on the web page for this specific Html element (in our in the example it was a paragraph). Why is this happening?

Background-repeat - repeat the background image

Yes, because we didn’t specify 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” (repeat the image on all axes). The answer came naturally.

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

Background-position - background positioning

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 there is a separate rule for this purpose. background-position:

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

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

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

When setting the positioning of the background image using absolute units in background-position it takes place next principle determining its final position:

Those. the browser will calculate specified indents 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://site/image/logo.png); background-repeat:no-repeat; background-position:400px 25px;

Please note that it is in in this case 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 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 viewing area and this is precisely the application that the CSS property background-attachment finds in modern block layout.

Is there some more prefabricated rule Background, which allows you to combine all five 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 assumed by the browser to be the default value.

Png) no-repeat 50%;

The example prefab rule is applied to this paragraph for clarity. It didn't turn out pretty, but that's not the main thing. This paragraph uses a strange background fill yellow color, and also uses an image of the Liveinternet logo, aligned in the center of the paragraph. Because If the background-attachment rule is not given any value, then the scroll value (the default) is used.

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

Background-color:#FEFCDE

write:

Background:#FEFCDE

Because all other values of the prefab rule will be taken by default, and that’s what you needed.

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

You can watch more videos by going to

background-color

I am more than sure that you have already assigned the background color more than once. 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 option, and for easier perception, the resulting 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 supports transparency, so we can add it to our color, for example like this:

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

The last figure 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 has added the ability to assign multiple images to the background, each creating its own 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 frills into each corner of the site. Given a more or less rubbery layout, using one image is not an option. Therefore, we make 4 “layers”, move each image to its own corner and that’s all, 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 images as a background, you should remember two rules:

set contrasting color background in case the user does not see the image for some reason. It can simply turn off the display of pictures, saving traffic.
do not use a background image to convey any important information. For the reasons stated above, the user may not see it.

Support for multiple background images is quite extensive. All browsers, even IE8, support this property.

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

Is it possible to use HTML to set the background?

I’ll say right away that no. In general, html was not created to design web pages. It's just very inconvenient. For example, there is a bgcolor attribute, with which you can set background color, but it's very inconvenient.

Accordingly, we will use Cascading Style Sheets (CSS). There are much more opportunities for setting a background. Today we will look at the most basic ones.

How to set a background using css?

So, first of all, you need to decide which element you want to set the background to. That is, we need to find a selector to which we will write a rule. For example, if you need to set the background for the entire page as a whole, you can do this through the body selector, and 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 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 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 hexadecimal code. To select colors, you can use a program that displays the color code. For example, photoshop, paint or some online tool. Accordingly, as an 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

For the image I will use small icon html language:

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 used a new property - background-image. It is intended specifically for inserting a picture as a background to an html element. Let's see what happened:

To specify a picture, you must write after the colon keyword url, and then in parentheses specify the path to the file. 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 whether you wrote the name of the image correctly, whether the path and extension are set correctly. These are the most common reasons the fact that the background is simply not displayed, since the browser cannot find the image.

But did you notice one thing? The browser took and multiplied the image throughout the block. So, just so you know, this is the default behavior of background images - they are repeated vertically and horizontally as long as they can fit into the block. By this behavior you can easily control. 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 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'll write it like this:

background-repeat: repeat-x;

background - repeat : repeat - x ;

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

Great, we can finish this now, since this basic capabilities work with the background, but I will show you 2 more properties that allow you to get more control.

Through repetition, layout designers used to be able to create 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 the result was a single, seamless background. By the way, this approach should be used now if you want to use seamless texture on your website as a background. Today the gradient can already be implemented using css3 methods, we will definitely talk about this later.

Background position

By default, the background image, unless it is set to repeat, will be on the left top corner your block. But the position can be easily changed using the background-position property.

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

background-position: right top;

background - position : right top ;

That is, vertically everything remains the same: the background image is located on top, but horizontally we changed the side to right, that is, 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 entire block. Thus, to place the picture exactly in the center, we write it like this:

background-position: 50% 50%;

Remember one important thing about 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 shifted a lot to the right, but it won’t 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 be necessary.

Shorthand 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 specified, the repetition, and the position. Of course, repetition and position are not always necessary, but in any case, it would be more correct to use a shorthand notation for the 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 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 abbreviated form, even if you only need to indicate a color or picture.

Controlling the size of the background image

Our current image isn't very good for demonstrating the next trick, so I'll take another one. Let it be the size of a block or larger. 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 block size.

What can you do in this 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 or opportunity to reduce it. The problem can be solved using 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'll give it a background size:

background-size: 80% 50%;

Again, the first parameter sets the horizontal size, the second - the vertical size. We see that everything was applied correctly - the photo became 80% of the width of the block in width and half in height. Here you just need to make one clarification - by setting the size as a percentage, you can influence the proportions of the picture. So be careful if you want not to upset the proportions.

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

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

Contain – scales it 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.

You should also 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 with a size of, say, 1280 by 200, and do not give it a background-size, then screens with a width larger will appear empty place, the image 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 good welcome, which should be used, but now you will face the problem that users with a screen width of 1920 pixels may see a suboptimal picture quality.

Let me remind you, it will stretch to its maximum width. Accordingly, the quality will automatically deteriorate. Only the right decision will initially use the image here bigger size– 1920 pixels wide. Then at the very wide screens it will be in its natural size, and on others it will simply be gradually cropped out, but at the same time, with proper selection of the background image, on appearance This will not affect the site.

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

Translucent background using css

Another feature that can be implemented with using css – translucent 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 to the image that we used earlier in the examples. For the block with identifier bg, on which we conduct all our experiments, we will set the background using the task format rgba colors.

As I said earlier, there are many formats for setting colors in CSS. 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.

brief information

CSS versions

Values

url The value is the path to graphic file, which is specified inside the url() construct. The path to the file can be written either in quotes (double or single) or without them. none Disables 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 the background to the inside 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 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 versions up to and including 7.0 do not support the inherit value.

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

HTML5 CSS2.1 IE Cr Op Sa Fx

Background for TR

Result this example V Chrome browser shown in Fig. 1. Internet Browser Explorer, Opera and Firefox correctly display the background for the line (Figure 2).

Rice. 1. Repeat the background for each cell

Rice. 2. Background for the entire line