Html5 page background. How to set background color in HTML. Ways to stretch a background image to the width of the window
- Different browsers implement the gradient functionality differently, so you need to add multiple versions of the code.
-
Create a directional gradient. If you don't want the gradient to run vertically, specify the direction in which the colors will fade. To do this, enter the following code between the tags :
html (min-height: 100%;) body (background: -webkit- linear-gradient (left, #93B874, #C9DCB9); background: -o- linear-gradient (right, #93B874, #C9DCB9); background: -moz- linear-gradient (right, #93B874, #C9DCB9); background: linear-gradient (to right, #93B874, #C9DCB9);
- If you like, rearrange the words "left" and "right" to experiment with different gradient directions.
-
Use other properties to customize the gradient. You can do more with it than you think.
- For example, after each color you can enter a percentage number. This will indicate how much space each color segment will occupy. Here is an example code with these parameters:
background : linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
- Add transparency to the color. In this case, it will gradually fade. To achieve a fade effect, use the same color. To set the color, you need the rgba() function. The last value will determine the transparency: 0 is an opaque color and 1 is a transparent color.
background : linear-gradient (to right , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , 1 ));
- For example, after each color you can enter a percentage number. This will indicate how much space each color segment will occupy. Here is an example code with these parameters:
Find the "html" header. It should be at the top of the document.
Remember the basic syntax for this process. To create a gradient, you need to know two quantities: the starting point/angle and the range of colors that will fade into each other. You can choose several colors so that they blend into each other; You can also set the direction or angle of the transition.
background: linear-gradient(direction/angle, color1, color2, color3 and so on);
Create a vertical gradient. If you don't specify a direction, the gradient will go from top to bottom. To create such a gradient, enter the following code between the tags :
html (min-height: 100%;) body (background: -webkit- linear-gradient (#93B874, #C9DCB9); background: -o- linear-gradient (#93B874, #C9DCB9); background: -moz- linear -gradient (#93B874 , #C9DCB9 ); background : linear-gradient ( #93B874 , #C9DCB9 );
Review the code. The code to create a color gradient as a web page background would look something like this:
< html > < head > < style >html (min-height: 100%;) body (background: -webkit- linear-gradient (left, #93B874, #C9DCB9); background: -o- linear-gradient (right, #93B874, #C9DCB9); background: -moz- linear-gradient (right, #93B874, #C9DCB9); background: linear-gradient (to right, #93B874, #C9DCB9); < body >
Tag img- empty, it contains attributes and does not have a closing tag.
The attribute is used to display an image on the page src. Src came from source, which means Source. The value of the src attribute is url Images.
The line above means that the image is in the same directory (folder) as the html file itself that links to this image. Let's say you have a folder html, which contains index.html with the above code and the image itself with the title image.jpg.
In this case, when opening index.html You will see this image in your browser. If you have it somewhere else (a folder higher or lower), then instead you will see either a white field or a small rectangle with a red cross (the image could not be loaded).
Images are not always located in the same directory (folder) as the file itself, so specifying paths will be described more specifically a little later.
img tag attributes
In addition to src, the img tag has other attributes that are responsible for the size of the displayed image, its caption, and so on. 
src- image address
width- image width
height- image height
title- signature that appears when you hover over the image
alt- alternative text. Needed for search robot and image indexing
border- thickness of the image border. 0 - no border, 1 - thinnest border, etc.
Address of inserted image (examples)
Usually, Images are not stored in the same folder as the html file. For this purpose, a folder is created in the same directory images(or img, depending on taste and color). And all the necessary images are already placed in it. In the case of separate storage, you will need to specify a different address for the src attribute 
If the file is in the folder above, then so
You can also insert an image from another site altogether, without downloading it to your folder. To do this, you must have a stable Internet connection and approximately the following code, in which you enter the address of the image on the Internet in the address:
Background image in HTML
As background image files with extensions may be gif, jpg, jpeg And png. If the image size is smaller than the browser window, the image will automatically continue to fill the remaining background. IN body use the attribute background, in which we specify the path to the image
Many novice layout designers, just delving into the essence of creating websites, often wonder how to make the background an image in html. And even if some people can figure out this task, problems still arise when stretching the image across the entire width of the monitor. At the same time, I would like the site to be displayed equally on all browsers, so the cross-browser requirement must be met. You can set the background in two ways: using CSS style. Everyone chooses the most optimal option for themselves. Of course, the CSS style is much more convenient, because its code is stored in a separate file and does not take up extra columns in the main tags of the site, but first, let’s look at a simple method of setting an image to the background of the site.
Basic HTML tags for creating a background
So, let's move on to the question, background in html on the whole screen. In order for the site to look beautiful, you need to understand one rather important detail: it’s enough to just make a gradient background or paint it with a solid color, but if you need to insert a picture into the background, it will not stretch across the entire width of the monitor. Initially, you need to select an image or make a design yourself with the extension in which your site page will be displayed. Only after the background image is ready, transfer it to a folder called “Images”. In it we will store all the pictures, animations and other graphic files we use. This folder should be in the root directory of all your html files. Now you can move on to the code. There are several options for writing code that will change the background to a picture.
- Write tag attribute.
- Through CSS style in HTML code.
- Write CSS style in a separate file.
How to make the background an image in HTML is up to you, but I would like to say a few words about how it would be most optimal. The first method, using writing through a tag attribute, has long been outdated. The second option is used in very rare cases, only because a lot of the same code is obtained. And the third option is the most common and effective. Here are HTML examples of tags:
- The first way to write is through the tag attribute (body) in the index.htm file. It is written in the following form: (body background= "Folder_name/Image_name.extension")(/body). That is, if we have a picture with the name “Picture” and the JPG extension, and we named the folder “Images”, then the HTML code entry will look like this: (body background="Images/Picture.jpg")… (/body) .
- The second recording method affects the CSS style, but is written in the same file called index.htm. (body style="background: url("../Images/Picture.jpg")").
- And the third recording method is made in two files. In a document called index.htm, the following line is written: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). And in the style file called style.css we already write: body (background: url(Images/Picture.jpg")).
We've discussed how to make a background image in HTML. Now you need to understand how to stretch the image across the width of the entire screen.
Ways to stretch a background image to the width of the window
Let's imagine our screen in percentage form. It turns out that the entire width and length of the screen will be 100% x 100%. We need to stretch the image to this width. Let's add a line to the image entry in the style.css file, which will stretch the image to the entire width and length of the monitor. How is this written in CSS style? It's simple!
background: url(Images/Picture.jpg")
background-size: 100%; /* this entry is suitable for most modern browsers */
So we figured out how to make a picture as a background in html to fill the entire screen. There is also a way to write in the index.htm file. Although this method is outdated, it is necessary for beginners to know and understand it. In the (head)(style) div ( background-size: cover; ) (/style) (/head) tag, this entry means that we are selecting a special block for the background, which will be positioned across the entire width of the window. We looked at 2 ways to make the background of a website an HTML image so that the image stretches across the entire width of the screen in any modern browser.
How to make a fixed background
If you decide to use a picture as the background of a future web resource, then you just need to find out how to make it motionless so that it does not stretch in length and spoil the aesthetic appearance. It’s easy enough to write this small addition with help. You need to add one phrase in the style.css file after background: url(Images/Picture.jpg") fixed; or instead add a separate line after the semicolon - position: fixed. Thus, your background image will become motionless. During Scrolling through the content on the site, you will see that the text lines move, but the background remains in place. So you have learned how to make the background an image in html in several ways.
Working with a table in HTML
Many inexperienced web developers, when faced with tables and blocks, often do not understand how to make a picture as a table background in HTML. Like all CSS styles, this web programming language is quite simple. And the solution to such a problem would be to write a couple of lines of code. You should already know that the writing of table rows and columns is referred to as (tr) and (td) tags respectively. To make the table background in the form of an image, you need to add a simple phrase to the (table), (tr) or (td) tag indicating a link to the image: background = URL of the image. For clarity, let's give a couple of examples.
Tables with a picture instead of a background: HTML examples
Let’s draw a 2x3 table and make its background a picture saved in the “Images” folder: (table background = “Images/Picture.jpg”) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). This way our table will be painted into the background of the picture.
Now let’s draw the same plate with dimensions 2x3, but insert a picture into columns numbered 1, 4, 5 and 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td)2 (/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”)5( /td) (td background = “Images/Picture.jpg”)6(/td) (/tr) (/table). After viewing, we see that the background appears only in those cells in which we have registered, and not in the entire table.
Cross-browser compatibility of the site
There is also such a thing as cross-browser compatibility of a web resource. This means that site pages will be displayed equally correctly in different types and versions of browsers. In this case, you need to adjust the HTML code and CSS style to the required browsers. In addition, in the modern era of smartphone development, many web developers are trying to create sites adapted for both mobile versions and computer views.
Good day to everyone who wants to learn and learn something new! Have you ever paid attention to the appearance, during the development of which the creators were too lazy to design the background of the pages? And I did. It looks bad. Often, due to the lack of the usual divisions between different types of information, it gets mixed up and there is simply no desire to look at anything further on such a web resource.
To prevent such a disaster from happening to me, I decided to write an article on the topic: “How to make a page background in html.” After reading the publication, you will learn what tools you can use to set the background design, how to make the background fixed or changing, and much more that will help make your site attractive. Now let's begin!
Basic tools for setting web page backgrounds
To set a background image, web language developers provided the background attribute. It is available both in , and in css.
In markup language, this is an attribute of the body tag, and in style sheets, it is a universal property that allows you to set up to 5 background characteristics at the same time. Background is a fairly flexible element that can be used to set the background in the form of a single color, a color picture, or even an animation.
So, to set the background image through the html unit
just write the following code: ... and instead of the words “file address” insert the path to the picture.
However, please note! If you want to see a single-color canvas as a background, specified by a value from the color palette, then this is done using the bgcolor attribute.
For example,
..., we have set a black background for our site.
Colors in css and html are specified either by an English word (for example, red) or a special code, which consists of the # sign and six characters after it (for example, #FFDAB9).
When you type the second option in specialized software for developers, the palette will automatically appear in front of you. If you have just started learning these web languages, then you can look up the color code on the Internet.
Background as a property in cascading style sheets
It is set either in a separate file with css styles, or in an element