Website layout: how to make background image in html

Many beginner typesetters who only delve into the essence of website development often wonder how to make a background picture in html. And if some people can figure out this task, then problems still arise while stretching the image to the full width of the monitor. At the same time, I would like the site to be displayed equally on all browsers, so the requirement for cross-browser compatibility should be met. You can set the background in two ways: using HTML tags and CSS style. Each for himself chooses 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 occupy extra columns in the main tags of the site, but first we will consider a simple method of setting the image on the background of the site.

Basic HTML tags to create the background

So, we turn to the question of how to make a picture a background in html in full screen. In order for the site to look beautiful, you need to understand one rather important detail: it’s enough to simply create a gradient background or fill it with a solid color, but if you need to insert a picture in the background, it will not stretch to the full width of the monitor. The image initially needs to be selected or independently made by design with such an extension in which you will see the site page. Only after the background image is ready, we transfer it to a folder with the name "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 a tag attribute.
2. Through CSS style in HTML code.
3. Write CSS style in a separate file.

How to make the background a picture 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 by writing through a tag attribute has long been deprecated. The second option is used in very rare cases, only because it turns out a lot of the same code. And the third option is the most common and effective. Here are the HTML tag examples:

1. The first way to write is through the tag attribute (body) in the index.htm file. It is written in this form: (body background = "FolderName / PictureName.extension") (/ body). That is, if we have a picture with the name “Picture” and the extension JPG, and we called the folder “Images”, then the HTML code will look like this: (body background = "Images / Picture.jpg") ... (/ body) .
2. The second recording method affects the CSS style, but is written to the same file as index.htm. (body style = "background: url ('../ Images / Picture.jpg')").
3. And the third way of recording is made in two files. The following line is written in the document with the name index.htm in the (head) tag : (head) (link rel = "stylesheet" type = "text / css" href = "Path to CSS file") (/ head). And in the stylesheet with the name style.css we already write: body {background: url (Images / Picture.jpg ')}.

How to make the background a picture in HTML, we have made out. Now you need to understand how to stretch the image across the width of the entire screen.

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

Imagine our percentage screen. 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. Add a line to the image in the style.css file, which will stretch the image to the full width and length of the monitor. How is this written in CSS style? Everything is simple!

body

{

background: url (Images / Picture.jpg ')

background-size: 100%; / * this entry is suitable for most modern browsers * /

}

So we have figured out how to make a picture a background in html in full screen. There is another way to write to the index.htm file. Although this method is obsolete, for beginners it is necessary to know and understand it. In the tag (head) (style) div {background-size: cover; } (/ style) (/ head) this entry means that we select a special block for the background, which will be positioned over the entire width of the window. We examined 2 ways to make a website background an html picture so that the image is stretched to the full width of the screen in any of modern browsers.

How to make a fixed background

If you decide to use a picture as a background for a future web resource, then you just need to learn how to make it stationary so that it does not stretch in length and does not spoil the aesthetic appearance. It’s easy enough to write this small addition using HTML code . 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. 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 picture in html, in several ways.

Working with a table in HTML

Many inexperienced web developers, when confronted with tables and blocks, often do not understand how to make a picture a table background in html. Like all HTML and CSS style commands , this web programming language is quite simple. And the solution to this problem is to write a couple of lines of code. You should already know that writing table rows and columns is denoted as (tr) and (td) tags, respectively. To make the background of the table as an image, you need to add to the (table), (tr) or (td) tag a simple phrase with a 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 a 2x3 table and make it a background image 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). So our table will be painted over in the background of the picture.

Now we draw the same 2x3 label, but insert the picture into the 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 site

There is also such a thing as cross-browser web resource. This means that the pages of the site will be equally correctly displayed in different types and versions of browsers. In this case, you need to customize the HTML code and CSS style for the necessary browsers. In addition, in the modern time of the development of smartphones, many web developers are trying to create sites that are adapted for mobile versions and for a computer look.