How to make a background in html

How to make a background in html

In the setting of any site, in addition to functionality, design is very important. This is what sets its own style and design of a company or person for which the site is created. It is not difficult to configure the color of the background and its image, following the instructions in this article.

1
Open your HTML file by means of a notebook or any other text editor to which you are used to.

2
For example, take a primitive page of the site with a minimum of text. You can open your file using any browser.

3
To begin with, change the color of your background, since people with a slow Internet connection will not immediately be able to see the background image of the site. A certain amount of time while the picture is loading, they can only see the color of your site.
Enter the ‹Body› Parameter bgcolor \u003d "*****", where ***** is a cipher of color. You can find out colors for HTML in any graphic editor by selecting the option “for VEB” or on the site https://colorscheme.ru/color-names

4
It is enough for you to choose the color in the palette of the circle and assign its intensity within the square. On the right you will see two codes for HTML. Copy them and insert them into the notebook.

5
Having picked up the color and insert it into the code, look if you did everything correctly by looking at the resulting web page from the browser.

6
Now you can start inserting the background image. Place the desired picture in a folder with a code for more convenience. Ask him the name in Latin letters.

7
Now find out the location of the file by clicking on it with the right button, selecting the “open” line and click on any browser installed on your computer.

8
Copy the address from the search line of your browser.

9
Now in the tag ‹Body› Enter the line:

  • style \u003d "BackGround-Image: url (‘ File: // C: /users/ Put_fila.jpg ’)"

10
Save your file.

11
Check your web page. You will see that the background is substituted for your text.

Please note that users who have a greater screen resolution have your image duplicated down and right. It will not look good if the picture is not monophonic. There are special commands to correct this parameter.

  • background-REPEAT: “Meaning". The variants of your meaning can be the following: “ repeat-X " - repeats your background image both horizontally and vertically. " repeat-y " - Repetition only vertically. " no-real " - The image is frozen in place and is not repeated. " space " - The whole page will be filled with the maximum number of copies of the image, the extreme will result in. " round " - the same option, but at the edges of the image they will be carefully scale;
  • background-Tetachment: “Value”. If you substitute the meaning of TEG instead of the word " scroll“, The image will scroll along with the site. " fixed” - when scrolling, the background remains unchanged;
  • background-Size: Value value2. Here, values \u200b\u200bshould take a value in pixels. For example: 100px 200px. In addition to pixels, percentage values \u200b\u200bare accepted. This is a page filling parameter with an image. In addition to numbers, you can enter two parameters: “ contain" - fills the page with an image on the long side and" cover” - fills the page with the image in width.

Knowing the basics of filling the page in the background in HTML, you are ready to create your first site.

Add a comment

Your e-mail will not be published. Mandatory fields are marked *

close