Website layout: how to make a background in html

Many beginners who only get to the heart of creating websites often wonder how in html to make the background a picture. And if some people can understand this problem, there are still problems when stretching the image to the full width of the monitor. At the same time, I would like the site to be equally displayed on all browsers, so the requirement of cross-browser compatibility should be met. You can set the background in two ways: using HTML tags and CSS style. Everyone chooses for himself the most optimal option. Of course, the CSS style is much more convenient, because its code is stored in a separate file and does not take unnecessary columns in the main tags of the site, but before we consider a simple method of installing an image on the background of the site.

Basic HTML tags for creating a background

So, let's move on to the question of how to make a background image in html on the whole screen. In order for the site to look beautiful, you need to understand one important enough detail: it's enough just to make a gradient background or paint it with a monochrome color, but if you need to put a picture in the background, it will not stretch over the entire width of the monitor. The image should initially be selected or independently made a design with such an extension, in which you will have a page of the site displayed. Only after the background image is ready, we transfer it to the folder named "Images". In it we will store all used pictures, animations and other graphic files. This folder should be in the root directory with all your html files. Now you can go to the code. There are several options for writing code, with which the background will change to a picture.

1. Write the attribute of the tag.
2. Through CSS style in HTML code.
3. Write the CSS style in a separate file.

As in HTML, to make a background a picture, you decide, but I would like to say a few words about how it would be most optimal. The first method with the help of writing through the tag attribute has long been outdated. The second option is used in very rare cases, just because you get a lot of the same code. And the third option is the most common and effective. Here are HTML examples of tags:

1. The first way to write via the body attribute in the index.htm file. It is written in this form: (body background = "Folder_name / Picture_name.extension") (/ body). That is, if we have a picture named "Picture" and an extension of JPG, and we named the folder as "Images", then the HTML code will look like this: (body background = "Images / Picture.jpg") ... (/ body) .
2. The second method of writing affects the CSS style, but is written in the same file called index.htm. (Body style = "background: url ('../ Images / Picture.jpg')").
3. And the third way of recording is done in two files. In the document called index.htm, the following tag is written in the head tag: (head) (link rel = "stylesheet" type = "text / css" href = "http: // site / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_file ") (/ head). And in the style file with the name style.css we already write: body {background: url (Images / Picture.jpg ')}.

As in HTML to make a background picture, we disassembled. Now you need to understand how to stretch the picture across the width of the entire screen.

Ways to stretch the background image to the width of the window

Let's imagine our screen as a percentage. It turns out that the entire width and length of the screen will be 100% x 100%. We need to stretch the picture to this width. Add to the image entry in the style.css file a string that will stretch the image to the full width and length of the monitor. How is it written in the CSS style? It's simple!

Body

{

Background: url (Images / Picture.jpg ')

Background-size: 100%; / * This entry is suitable for most modern browsers * /

}

So we figured out how to make a background image in html on the whole screen. There is also a way to write in the index.htm file. Although this method is obsolete, it is necessary for beginners to know and understand it. In the tag (head) (style) div {background-size: cover; } (/ Style) (/ head) this record means that we select 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 site's background an html image, so that the image would stretch across the entire width of the screen in any of the modern browsers.

How to make a fixed background

If you decide to use the picture as the background of a future web resource, then you just need to learn how to make it fixed, so that it does not stretch in length and does not spoil the aesthetic appearance. It's enough simply to use HTML code to write this small add-on. You need to add one phrase in the style.css file after the background: url (Images / Picture.jpg ') fixed; Or instead of adding a separate line after the semicolon - position: fixed. That way, your background picture will become still. While scrolling content on the site, you will see that the text lines are moving, and the background remains in place. So you learned how to make a background 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 in a html background a table. Like all HTML and CSS style commands , this web programming language is quite simple. And the solution to this problem will be writing a couple lines of code. You should already know that the writing of table rows and columns is denoted respectively as tags (tr) and (td). To make the background of the table as an image, you need to add a simple phrase to the tag (table), (tr) or (td) with the link to the image: background = URL of the image. For clarity, we give a couple of examples.

Tables with a picture instead of a background: HTML examples

Let's draw the 2x3 table and make it the background picture saved in the Images folder: (table background = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) (Td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ table). So our table will be painted over in the background of the picture.

Now draw the same table with the size 2х3, but we will insert the picture into the bars under the number 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 the cells in which we have registered, but not in the whole table.

Cross-browser site

There is still such a thing as cross-browser resource of a web resource. This means that the pages of the site will be displayed in the same way in different types and versions of browsers. At the same time, you need to customize HTML code and CSS style for the necessary browsers. In addition, in the modern era of smartphone development, many web developers are trying to create sites that are adapted for both mobile versions and a computer view.