Website layout: how to make a background image in html

Many beginners who only scrutinizein essence of creation of sites, often wonder how in html to make a background a picture. And if some people can understand this problem, then still there are problems while stretching the image to the full width of the monitor. In this case, I would like the site to be displayed in the same way 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 a site.

how to make a picture background in html full screen

Basic HTML tags for creating a background

So, let's move on to the question of how to make a picturebackground 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 solid color, but if you need to insert 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 by 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.

Write the tag attribute.
Through CSS style in HTML code.
Write the CSS style in a separate file.

As in HTML render a background picture, it's up to you, butI would like to say a few words about how it would be most optimal. The first method by writing through the tag attribute has long been obsolete. 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 example tags:

The first way to write through the tag attribute (body) infile index.htm. It is written in this form: (body background = "folder_name / name_pictures.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) .
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 ")").
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 = "Path_to the 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 picture background inhtml to full 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 examined 2 ways how to make a site background html image, so that the image is stretched to the full width of the screen in any of the modern browsers.

How to make a fixed background

If you decide to use the picture asbackground of the 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 after the background: url (Images / Picture.jpg ") fixed in the style.css file, or add a separate line after it: semicolon - position: fixed.Thus, your background picture will become still. scrolling content on the site, you will see that the text lines are moving, and the background remains in place.Here you learned how to make a background in html, in several ways.

Working with a table in HTML

Many inexperienced web developers, faced withtables and blocks, often do not understand how in html to make a picture a background of the 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 of lines of code. You should already know that writing 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

Draw the table 2x3 and make it a background image,(td) 2 (/ td) (td) 3) (/ td) (/ tr), which is stored in the Images folder: (table background = "Images / Picture.jpg") (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.

html to make a picture background of the table

Now we draw the same table with dimensions 2х3, butwe insert the picture in columns 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, but not in the whole table.

Cross-browser site

There is still such a thing ascross-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.