From the author: I welcome everyone. Background colors and images in web design have a huge role, as they allow you to more attractively arrange any elements. How to make a background in HTML, we will look at today.
Is it possible to do with the means of HTML when setting the background?
Immediately I will say that there is no. In general, HTML is not created in order to draw up web pages. It is just very uncomfortable. For example, there is a BGColor attribute, with which you can set the background color, but it is very uncomfortable.
Accordingly, we will use cascading style sheets (CSS). There are much more opportunities for the task of the backgrow. Today we will analyze the most basic.
How to set the background via CSS?
So, first of all, you need to decide on how the element needs to be specified. That is, we need to find the selector to whom we will write a rule. For example, if the background must be asked the entire page as a whole, you can do it through the Body selector, all blocks - through the DIV selector. Well, etc. The background can and need to be tied to any other selectors: stylized classes, identifiers, etc.
After you have decided on the selector, you need to write the property name itself. To set the background color (precisely solid color, not gradient and not pictures), the Background-Color property is used. After it, you need to put the colon and write the color itself. This can be done in different ways. For example, using keywords, hex code, RGB, RGBA, HSL formats. Any way will fit.
The method of hexadecimal code is most often used. To select colors, you can use a program in which the color code is visible. For example, Photoshop, Paint or any online tool. Accordingly, for example, the overall background for the entire web page.
body (Background-Color: # D4E6B3;)
This code must be inserted into the Head section. It is important that the files are in the same folder.
Picture as background
As a picture, I will use a small HTML language icon:
Create an empty block with an identifier:
< div id = "bg" > < / div > |
Let him give explicit sizes 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 just for inserting a picture as a backdrop HTML element. Let's see what happened:
To set the picture, you must write a URL keyword after a colon, and then in parentheses to specify the path to the file. In this case, the path is indicated based on the fact that the image lies in the same folder as the HTML document. You also need to specify the image format.
If you have done this, and the background does not disappear in the block, check again, whether you wrote the name of the picture correctly, the path and expansion is correct. These are the most frequent reasons why the background is simply not displayed, as the browser cannot find the image.
But did you notice one feature? The browser took and spread the picture throughout the block. So, so that you know, this is the behavior of the background pictures by default - they are repeated vertically and horizontally to those time, while they can get into the block. On this behavior you can easily manage. 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 OR X;
Repeat-y - repeats only along the Y axis;
No-repeat - not repeated at all;
Every value you can register and see what happens. I regish this:
background-repeat: repeat-x;
background - Repeat: Repeat - X; |
Now the repetition is only horizontally. If you register no-repeat, there would be only one picture.
Excellent, you can already finish, as it is the basic features of working with the background, but I will show you another 2 properties that allow you to get more opportunities in management.
With the help of repetition, the vertellors used to achieve the fact that the background textures and gradients created, using one tiny image. It could be 30 per 10 pixels or even less. Or maybe a little more. The image was such that when he repeated one or even on both sides, there were no transitions, so in the end, a single one-piece background was obtained. By the way, such an approach should be used and now, if you want to use a seamless texture on your site as a background. The gradient today can already be implemented by CSS3 methods, we will still be talked about this.
Background position
By default, the background image, if the repetition is not specified for it, will be in the upper left corner of its block. But the position can be easily changed using the Background-Position property.
You can specify it in different ways. One of the options, it's just to specify the parties in which the picture should be:
background-Position: Right Top;
background - Position: Right Top; |
That is, it all remains vertically: the background picture is located on top, but horizontally we changed the side on Right, that is right. Another way to set a position is in percent. The countdown at the same time begins in any case from the upper left corner. 100% - all block. Thus, to put the picture exactly in the center, write down this:
background-Position: 50% 50%;
background - Position: 50% 50%; |
Remember one important thing associated with positioning - the first parameter always indicates the horizontal position, and the second is vertically. So, if you see a value of 80% 20%, then you can immediately conclude that the background image will be very shifted to the right, but it will not go down much.
Well, finally, it is possible to prescribe a position in pixels. All the same, only instead of% there will be px. In some cases, such positioning may also be needed.
Abbreviated recording
Agree that the code is quite cumbersome, if we set everything as we did. It turns out, and the path to the picture must be specified, and repetition, and the position. Of course, the repetition and position is not always necessary, but in any case, it will be more correct to use the abbreviated property entry. 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 thing you need to record a total 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, it is much faster and more convenient, and we also significantly reduce our code. In general, I advise you to record abbreviated always, even if you only need to specify a color or picture.
Manage the size of the background picture
Our current image is not very well suited for the demonstration of the next trick, so I will take another. In size, it will be like a block or more of it. So, imagine that you have a task: make a background picture so that it filled out its block is not completely. And the picture, let's say even more block sizes.
How can I do in this case? Of course, the easiest and most reasonable option will simply reduce the picture, but it is not always possible to do this. Suppose it lies on the server and at the moment there is no time and 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 picture is now coversing all the space in the block, but I will ask her background size:
background-Size: 80% 50%;
background - Size: 80% 50%; |
Again, the first parameter is set to horizontally, the second is vertically. We see that everything is correctly applied - photos became the size of 80% of the width of the block wide and half into the height. Here you just need to make one refinement - setting the size in percentage you can affect the proportions of the picture. So be careful if you want not to disturb the proportion.
As you can guess, the background size can also be indicated in pixels. There are still two key words values \u200b\u200bthat can also be used:
Cover - There will be scaling for a picture in such a way that at least one side it completely filled the block.
Contain - backed up so that the picture completely climbed into the block in the maximum size.
The advantages of these values \u200b\u200bare 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 of its quality. I can give an example from the life and real practice of the vestors. Everyone knows and understand that when laying under the desktops, you need to adapt the site under the main widths of monitors: 1280, 1366, 1920. If you take a background picture picture, say, 1280 per 200, and do not specify it Background-size, then screens with width more There will be an empty place, the picture will not fill in the width completely.
In 99% of cases, this is not satisfied with the web developer, so it sets the Background-Size: Cover to the picture always stretched to the maximum over the width of the window. This is a good reception you want to use, but now you will come across the problem that users with a screen width of 1920 pixels can see the picture of non-optimal quality.
I remind you, it stretches to the maximum width. Accordingly, the quality will automatically deteriorate. The only right solution will be initially used to use a larger image - 1920 pixels in width. Then, on the widest screens, it will be in its natural size, and on others it will simply be slowly cutting off, but at the same time, with a competent selection of a background picture, it will not affect the appearance of the site.
In general, this is just 1 example of how to use the knowledge you received in this article, when laying up real layouts.
Translucent background with CSS
Another chip, which can be implemented using CSS - translucent background. That is, through this background, you can see what to be behind him.
For example, I will define the entire page as a picture of a picture that we used earlier in the examples. The block with the Identifier BG, on which we spend all our experiments, set the background using the RGBA color task format.
As I have already said earlier, there are many formats in CSS to specify the color. One of them is RGB, a fairly well-known format for those who work in editors. It is written as follows: RGB (17, 255, 34);
The first meaning in brackets is saturated with red, then green, then blue. The value can be numerical from 0 to 255. Accordingly, the RGBA format is no different, only another parameter is added - the alpha channel. The value can be from 0 to 1, where 0 is complete transparency.
Hello, dear blog readers Website. 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, and about the composite rule, the background will not forget to mention.
Nothing is difficult in this, but there are certain subtleties and nuances that you need to know and already ready for the template (remember the pro, which will help to open all the removal of any design).
Once again I remind you that this article is included in the series and the best thing will be to start learning the style markup at first, namely from the article about what CSS is and with what it is eaten, well, and then follow in the order specified in the directory. Although, in any case, you decide to you, and now let's talk about task the background.
Color, Background-Color and Background-image
Let's first see how the color of HTML elements is set using CSS rules Color. In fact, everything is simple. The syntax is completely ordinary and color you can set in accordance with how it was done in the language of hypertext markup. How do you remember set after the lattice sign (Hesha - "# Fe35a3"), or with the help of three digits, if the first coincides with the value of the second, third with the fourth, well, and the fifth, respectively, with the sixth (color code "# AA33FF" You can briefly record 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
For example, I painted this little paragraph to the color that is above (# 303). Now it is slightly different from the color of all other paragraphs (darker), which is asked as # 555 in the CSS file using the WordPress theme. But the task of color through color is quite simple, but with the background it will be a little more complicated.
So, for background in CSS Answer five rules that, if desired, can be combined into one team. To see them, you can go to the W3C Consortium Specification page and search there with a word background:
- background Color - With this rule, the color of the background is set for any HTML element. It can use either code or the name of the shade, i.e. All exactly as it was when using Color.
background image - Using it, you can use the picture as a background as a background (but be sure to read about that, for heavy pictures will slow down the page loading), the path to which will be specified in the URL functionality ().
If you look into the specification, you will see that default Color Background In any element there will be a transparent (default value "Background-Color: Transparent" rule). True, in the elements, it will not be transparent by default, because These are systemic elements and they have everything differently and differs from the usual tags of the hypertext markup language.
Color in the Background-Color is set standard (six or three numbers of hexadecimal code, or a word):
Background-Color: #FeFcde
For example, the background of this paragraph is given exactly through the Background-Color with a slightly higher color code.
All other four CSS rules will only touch the background picture, which can be specified for any HTML element and, if desired, it is precisely positioned. Which graphic file will be used, you can set using background-image..
If you look at the specification of the style markup language, you will see that the default "None" value is used by default (i.e., no image for the background is used). Well, if it is still needed, then in the URL functionality () you will need to specify the path to it:
Background-image: URL (https: //set/image/comment_top_focus.gif);
For example, for this paragraph I used a graphic file with a background, the path to which is described slightly above. You see that the whole area assigned to this paragraph was covered with a repeated image, which in the original it has this kind:
Those. When using only one background-image rule, indicating the path to the graphic file, this image will be multiplied both by vertical and horizontally until it covers the entire area allocated on the web page under this particular HTML element (in our An example was paragraph). Why is this happening?
Background-Repeat - Repeated Background Picture
Yes, because we did not prescribe any value for CSS Rules background-repeat.So it will be used for it that the default value will be used. Looking into the specification, we learn that this value corresponds to "REPEAT" (repeat image on all axes). The answer was found by himself.
Consequently, using the background-repeat we can driving a background image repetitions. This rule can only have four values:
Background-Position - Background Positioning
Now the question arises, and whether the background picture can be moved away from the left upper angle of the region limiting the size of the element. Of course, it is possible, and for this purpose serves a separate rule background-Position:
Looking at the CSS specification it becomes clear why the background picture is pressed by default precisely to the upper left edge of the HTML area of \u200b\u200bthe element. Because the value "0% 0%" is default for the Background Position rule.
Well, when this rule is explicitly specified for the element (as in our case), the browser selects its meaning that is accepted in the default specification (I note that the coordinate axes report in CSS are carried out from the top left edge of the region element).
Also, it can be seen from the specification that to position the image of the background using the Background-Position, you can use both relative (percentages) and absolute values \u200b\u200b(for example,). Well, as well as you can use words that will correspond to certain digital values. But everything is in order.
When specifying the positioning of the image of the background using absolute units In the background-position, there is a following principle of defining its final position:
Those. The browser will calculate the specified indents on the X and Y axes from the origin of the area in which the object is positioned before the coordinates of this image itself. For example, in this paragraph I positioned the background image via the Background Position using the following CSS rules:
Background-image: URL (https: //syt/image/logo.png); Background-Repeat: No-Repeat; Background-Position: 400px 25px;
Please note that in this case it will be aligned in the center of the viewing area, and not in the center of the area allotted under these paragraphs. It is clear that in reality, this placement of the background picture is unlikely to find application.
However, if you specify 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 it is such an application finds CSS the Background-Attachment property 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 \u200b\u200bfor all five in the precast version can be used in any order and in any quantity (they are unique and the browser does not confuse them with each other). All you do not explicitly specify the browser will consider an equal default value.
PNG) NO-REPEAT 50%;
The prefabricated rule shown in the example is applied to this paragraph for clarity. It turned out not beautiful, but it is not important. For this section, the background fill of a strange yellow color is used, as well as the image of the Loyvinternet logo, aligned in the center of paragraph. Because For the Background-Attachment rule, no value is set, it uses the SCROLL value (default).
If for some item you want to set only the fill with color, and with the background, the image does not bother, then you may well instead:
Background-Color: #FeFcde
write:
Background: #fefcde.
For all other value of the collection rule will be taken by default, and you needed it.
Good luck to you! To ambiguous meetings on the blog pages Website
You may be interested
List Style (Type, Image, Position) - CSS Rules To configure the appearance of the lists in HTML code How to configure an alternation of background color strings of tables, lists and other HTML items on the site using NTH-Child pseudoclass 
Position (Absolute, Relative and Fixed) - Ways to position HTML elements in CSS (Rules Left, Right, Top and Bottom) 
Float and Clear in CSS - block layout tools 
Positioning with z-index and CSS CURSOR rule to change the mouse cursor 
Padding, Margin and Border - We ask in CSS internal and external indents, as well as Ramcidl All sides (Top, Bottom, Left, Right) 
Display (Block, None, Inline) in CSS - Specify the type of display of HTML elements on the web page 
Priorities in CSS and their enhancement by Important, combination and grouping selectors, user and copyright styles 
CSS - What it is, as Cascading Style Tables connect to HTML code using Style and Link 
Tag Selectors, Class (Class), ID and Universal, as well as attractors of attributes in modern CSS
I think there is not a single site where the property would not be used. CSS Background.. It would seem that it may be easier for this property? But no, its capabilities is much wider than the usual purpose of the picture or color as a background of the page. Something will be familiar, and something for sure will become a novelty for many. In any case, you will thoroughly know how the background works will be useful.
CSS3 brought a lot of new ones, this is the transparency, and the purpose of several images as a background, but we will talk about it below, and for beginnings, consider the basics of the property background..
background-color.
I am more than confident - you have repeatedly made the appointment of the color of the background. You can do this using several types of records: the usual one (color name), hexadecimal or RGB record. Each type is equivalent, use which more like it. I try to use the shortest option, and for perception easier and the styles file is slightly smaller than the size.
P (background-color: red;) P (background-color: # F00;) P (background-color: # ff0000;) p (background-color: rgb (255, 0, 0;))
In CSS3, transparency support is introduced, so you can add it to our color, for example, so:
P (background-color: rgba (255, 0, 0, 0.5);)
The last digit has established transparency of 50%. You can set the transparency value from 0 (completely transparent background) to 1 (completely opaque).
background-image.
This property is also used very often, allows you to assign an image to the background. The CSS3 added the ability to assign several images to the background, and each creates a peculiar layer, so each subsequent is superimposed on the previous one. Why can this come in handy? Everything is quite simple - let's say, you need to fasten the rushes in each of the corners of the site. Subject to a more or less rubber layout, use one image is not an option. Therefore, we make 4 "layers", each image moves to your corner and on it all, the task is solved
Body (Image1), URL ("image2"), URL ("image3"))
If you need to assign one image on the background - in the code, we only leave first, I think it is understandable.
Using any images as a background, two rules should be remembered:
- set the contrast background of the background in case the user for some reason does not appear the picture. It can tritely disable the display of the pictures, saves traffic.
- do not use the background image to transfer any important information. Due to the above, the user may not see.
Support for multiple images for the background is quite wide. All browsers, even IE8, support this property.
brief information
Versions CSS.
Values
URL The path to the graphic file is used as a value, which is specified inside the URL () design. 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 parent value.HTML5 CSS2.1 IE CR OP SA FX
Object model
document.getelementByid ("Elementid") .style.BackgroundImage
Browsers
Internet Explorer to version 7.0 inclusively applies background to the inner part of the element boundary, which has the HaslaYout property. If the element does not have HaslaYout, the Background-Image property will take into account the boundaries of the element, as is the specified in the specification. The difference in the mapping will be noticeable if the borders of dotted (dashed or dotted), and not solid.
If the value is set as SCROLL or AUTO for an item, in Internet Explorer 8 there will be a vertical delay in one pixel when scrolling the background.
Internet Explorer before version 7.0 does not support the INHERIT value.
If the background is set for the table row (tag
HTML5 CSS2.1 IE CR OP SA FX
| 1 | 2 | 3 |
The result of this example in the Chrome browser is shown in Fig. 1. Internet Explorer, Opera and Firefox browser correctly display background for string (Fig. 2).
Fig. 1. Repeating background for each cell
Fig. 2. Background for the entire row
