Background is an important part of a web page. By default, it is white. But the HTML language provides several options for changing its properties. On the Internet, most sites have colorful backgrounds, including animations. They have various graphics or background images. The background style for websites is set using the <style> - background attribute in HTML. There are several CSS properties used to customize the background of an element.
Attributes for changing background settings
In HTML code, background is set for both the entire page and its individual elements. Previously, the <body> tag was used for this, but now this practice is considered obsolete. The attribute was used before specification 4.01 and was written in HTML: <body background = "">. Right now, the easiest way to change the default is to set the background-color attribute for the <body> tag.
There are five basic attributes that are used in HTML and CSS to change the background:
- -color - indicates which color will be used for the fill;
- -image - sets the image for the background;
- -position - indicates where to place the background image;
- -repeat - determines if the image is duplicate;
- -attachment - determines whether the image will scroll along with the page;
- -size - sets the background a certain size;
- -origin - defines the area for positioning the background image;
- -clip - Determines how the background image or background color is displayed below the borders of the element.
The first five properties can be combined into one short attribute - background. The attribute works in browsers Firefox, Safari, Opera, IE8. Only in legacy IE7 and IE6 the background does not include borders.
How to change background color in HTML
The background color attribute (background-color in HTML and CSS) fills the pages with solid color. There are several ways to set the color using different formats:
- -color: red;
- -color: rgb (0, 0, 255);
- -color: # 2500ff.
For the background, the transparent property can be set, which is responsible for the degree of transparency and allows you to make any elements below it visible.
How to set a background image
Background-image is a property that allows you to specify the image that will be displayed instead of the background. It is set using CSS code and the HTML language: background-image: url (image.jpg). The code is very simple, but in order for it to work, the picture must be in the same folder as the files with styles. If this is not the case, the correct address must be indicated in brackets, for example: background-image: url (images / image.jpg). The background image can be used in combination with background-color. If it is not repeating, then the rest, not covered by the picture, will have the color specified in this property.
Background position
The CSS and HTML background-position attribute controls the location of the background image and determines where it is located in the element. Using it, you can specify where the upper left corner of the image will be located relative to the upper left corner of the element. First, the property records the position along the horizontal axis of coordinates, and then - along the vertical. For this, it is more convenient to use pixels.
For instance:
- -position: 0 0 - used by default and indicates the location of the background in the upper left corner of the element;
- -position: 100px 0 - will shift the image to the right;
- -position: -100px 0 - move the image to the left;
- -position: 0 100px - will lower the image down.
The background-position attribute also works with other values, keywords, and percentages. They can be useful if the element size is not specified in pixels.
How to use keywords for background layout
Keywords can be used to specify coordinates on the horizontal and vertical axis, and it does not matter in what order they are written. Keyword options for the horizontal axis:
For the vertical axis:
When working with other units, the coordinates are first set on the horizontal axis, and then on the vertical. For example, background-position: bottom right. Percentage values are used in a similar way. In this case, the reference point is in the upper left corner of the browser window. Percentage example: background-position: 100% 50%. This means that the image will shift to the right and will be in the center of the right side of the element. You can get the same effect if you use the: right center property. If you apply the value of background-position: 100% 100%, then the background will be in the lower right corner of the element.
Background repetition
By default, when you set an image as a background image, it is repeated both horizontally and vertically until the entire browser window or element is filled. But sometimes it is required that the image is shown only once or located in only one direction. To do this, the following attributes will be needed in CSS and HTML for background:
- -repeat: repeat - by default, the image is repeated until the element is completely filled;
- -repeat: no-repeat - the image is not repeated and is used on the page only once;
- -repeat: repeat-x - repeat only on the horizontal axis;
- -repeat: repeat-y - repeat only along the vertical axis;
- -repeat: inherit - The browser uses the value assigned to the parent element.
Attribute for scrollbar
In HTML, background-attachment determines what happens to the picture when the user scrolls the page. This attribute has several properties: scroll, fixed, and inherit. Inherit tells background-attachment to inherit its parent property. To use background-attachment correctly, you need to think about how the user will interact with the viewport. A browser window is a section of your browser that displays a web page. When you scroll down a site, it does not move. Instead, the contents of the page scroll up, but it seems that the page scrolls down in the browser window.
When setting the HTML background-attachment: scroll property, the browser is informed that the background should scroll along with the element. The background “sticks” to the element and scrolls until it disappears. This is the default value for background-attachment. But when the background-attachment: fixed property is set, the background should remain in its place and not move along with the content. When you scroll down the page, it always remains visible.
How to jot down background properties
Instead of writing all these rules separately each time, they can be combined into one and written as follows: background: <color> <image> <position> <attachment> <repeat>. And you do not need to specify each value separately. If the property is not used, the default value will be triggered instead. It is important to note that the background image appears only in areas where the parent element is present. Even when it is located relative to the browser window, it will not be displayed if its parent element is not visible. In CSS3, you can use more than one image for the background of an element. The code will be the same as CSS2, only the addresses of individual images need to be separated by a comma. The first of them will be located at the top of the element, and the subsequent ones will simply be layered on it.
Background-size property
Sometimes for a site you need to set a background of a certain size. The attribute used for this in HTML is background-size. This property has a number of possible values:
- -size: contain - scales the image so that it matches the element, while preserving the pixel aspect ratio;
- -size: cover - expands the image to fill the element, maintaining the proportions;
- -size: 100px 100px - scales the image to the specified size;
- -size: 50% 100% - scales the image to the specified size, percentages relate to the size of the containing element.
HTML background size for Firefox prior to version 4.0 is set by the non-standard property -moz-background-size. Similarly, for Opera prior to version 10.53, you will need to specify -o-background-size.
Background-origin property
The background-origin property is used in conjunction with background-position to position the background image. It is used if background-attachment is set as fixed. Its parameters can be counted from the borders, indents or contents of an element.
- -origin: border-box; background - the position is calculated from the border.
- -origin: padding-box; background - the position is calculated from the fill field.
- -origin: content-box; background - the position is calculated based on the content of the element.
Background Image Use Options
In addition to the obvious decorative use of the background, it can be used for other purposes. For example, if you add a float property in CSS to offset elements, it is difficult to guarantee that two or more columns are the same width. If they are different, then the background of one of the columns will end earlier than the background of the other. You can avoid this effect if you use a separate background for each of the columns. But it’s much easier to apply a single background image to their parent element. Another possible use is decorating disordered lists. Bullets in them may not look very attractive, so it’s better to hide them and replace them with a background image.
Fonts instead of background in HTML: background font
The choice of fonts for website design on the Internet is very limited. You can make original fonts, but they require the user to enable JavaScript. A simpler solution that works in any browser is to create an image from text and use it as a background for an element. If you want the text to remain in the markup for search engines and screen readers, simply assign a class to the element, leave the text in the description and add the image via CSS. At the same time, browsers will show the inscription using not the custom font, but the one that the designer chose.
New property - background-break
CSS3 introduced an innovation: elements can be divided into separate blocks, lines and pages. The background-break property determines how the background is displayed in different windows.
Possible values:
- -break: continuous - the default value. Handles blocks as if there is no space between them;
- -break: bounding-box - takes into account the space between blocks;
- -break: each-box - processes each block in an element separately and re-draws the background individually for each of them.
There are many more properties that help customize the display of the background, the most common are described here. Knowledge comes from experience, so practice is the best way to learn CSS and HTML.