In this post, I will tell you, as usual set the background to the site using HTML code.
I will also show you an excellent foreign service for the selection of seamless backgrounds.
Now site settings are made easier and more convenient through CMS consoles such as WordPress.
Sometimes it is necessary to change the templates of selling sites, and this article will help with this.
If you don't know what is HTML, then it can be generically called the language of sites or a set of rules by which sites are generated.
For example, you see a picture on a website, when in the HTML code of the page it might look like this:
Sets a solid color to the background of the page.
In order to install solid color background, need to tag add attribute bgcolor.
< html >
< head >
< title >Page title.
< body bgcolor = "#ffcc00" >
You can paste this code into a text file and save it with the .html extension. Then open with any browser and see the result.
As you might have guessed, the background color comes from the color code in the attribute bgcolor="value" which can be found by clicking on this link.
Setting an image to the background of an HTML page.
In order to set background image, you can use the attribute background in the tag .
< html >
< head >
< title >Page title.
< body background = "http://сайт/images/mlmsecret.jpg" >Hello. This is my first page.
You may notice that the attribute background is equal to the path of the file that is used as the background.
To quickly change the background or any picture on the page, just specify a new path to your file using a text editor.
To find out the previous path, you need to on the page with the picture, right-click on the picture and click on "Copy image URL." this way you will see the name of the picture/background. You can then simply replace the old image with your own using the same file name.
These were the basics for setting up. background in html, now the most interesting. 🙂
Modern browsers allow you to add an arbitrary number of background images to an element, listing the parameters of each background separated by commas. It is enough to use the universal background property and specify one background for it first and the second one separated by a comma.
How to stretch the background to the full width of the window?
The background-size property is intended for scaling the background, 100% is specified as its value, then the background will occupy the entire width of the browser window. For older browsers, specific prefixed properties should be used, as shown in example 1.
How to add a background image to a web page?
To add a background image to a web page, specify the path to the image inside the url value of the background style property, which in turn is added to the body selector.
Is it possible to make an animated background?
Animation is a powerful enough technique that can bring any document to life, so it is not surprising that Flash technology has gained immense popularity, which adds cartoons to web pages, besides interactive ones. The GIF graphic format also supports the simplest animation through sequential frame changes. So using an image in this format, it is permissible to animate not only individual images, but also the background of a web page or a specific element.
First you need to create an animated picture in GIF format, for which you can use Adobe Photoshop or another suitable program for this purpose. There are also libraries of ready-made animated files that can be used as a background image. Next, the image is added as a background using the background style property, as shown in example 1.
How to put a background image in the bottom right corner of a page?
To control the position of the background image on the page, the background-position style property is used, it simultaneously sets the horizontal and vertical coordinates of the image. To stop a background image from repeating, use the background-position property with the value no-repeat .
How to make the background not repeat?
By default, the background image repeats horizontally and vertically, tiling the entire field of the web page. However, this behavior of the background is not always required, especially in the case of a single image, so the no-repeat value added to the background style property comes to the rescue.
How can I make the background repeat only vertically?
Background repetition is usually required to create decorative lines or gradients tied to the height of an element or window on a web page. In such cases, repeating the background vertically provides a solid picture regardless of the size of the elements. Only in the beginning you should take care that the background image is repeated without joints.
The background color is quite an important element of any web page. Firstly, it sets the right mood and general mood of the site, and secondly, it facilitates the perception of the text.
The background color of a web page is set using the bgcolor attribute of the tag
.Example 1: Changing the background color
The color can be specified in hexadecimal value or by its name.
Although you can specify any color for the background, most sites use a predominantly white background and black lettering as the most established option.
background picture
As a background, you can use any suitable image for this. The background should not detract from the text, while it should blend well with the color scheme of the web page and be small in size to load quickly. If, after the above, you still want to add a background image to the page, you should use the background attribute of the tag
.Example 2: Adding a background image
If the image is smaller than the screen size of the monitor, it will be reproduced horizontally and vertically.
Since the background image loads more slowly than the background color, it may happen that the text will not be readable for a while until the images are loaded. The same thing can happen with images disabled in the browser. Therefore, it is recommended to always set the background color along with the background image (example 3).
Example 3: Using a background image and background color
fixed background
By default, when using the scroll bar, the background image moves with the content of the web page. Internet Explorer allows you to make the background fixed using the bgproperties="fixed" attribute of the tag
.Example 4 - Setting a fixed background
By specifying the bgproperties attribute, as shown in example 4, the background image on the web page will remain stationary and text, graphics, and other elements will move with the scrollbar.
To create a site, an important issue is how to make a background in html. This procedure involves the use of certain tags - code words and letters. Thanks to them, you can put a different background, make it monophonic - fill it, or put any picture in place of the background. Such actions will be very useful for all layout designers, and for those who decide to “dress up” their site on their own.
Making the background
Before you make the background of the html site, you need to open the html page code in a text editor. Remember that the tags on the page are placed vertically. Then, between tags
… , you need to put a tag- These tags are needed in order to clarify the style of the elements of this web page. In place of the three dots, you need to write - body (background:) . This is a setting that allows you to set different styles for the page background. You can do the color setting operation in two ways. First:Body (background:#000000) - The background of the page should now be black.
This method is also suitable for setting both the color and the background image. It is after the colon that you can put either a color code or a link to an image. Or you can use a method that only means setting a color - a specific fill for the page. After the colon, you need to register the so-called parameter - color. And after it, put the code of the color itself. This method is good if used as a template. Register it and save it, and when necessary - set the color, put it on the page.
You can put, instead of a plain background, a picture. If you need to find out: in html, how to make an image a background, then you need to do similar operations. Register tags, put body (background: link to the image). It must be remembered that the picture itself can be anywhere. And on a website on the Internet, but it is best to create a folder in the root of the document. In the folder inside which all information about the site page will be stored, you need to create another one - for pictures. The operation will look like this:
Now the picture you have chosen will be the background of the entire page of the site. We hope you understand how to make a background in html. Just try it and you will definitely succeed!
Many novice layout designers, who are just delving into the essence of creating sites, often wonder how to make a background image in html. And if some people can figure out this task, then there are still problems while stretching the image to the full width of the monitor. At the same time, I would like the site to be displayed in the same way on all browsers, so the cross-browser compatibility requirement must be met. You can set the background in two ways: using and CSS styling. Everyone chooses the best option for himself. Of course, 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 site tags, but first, let's look at a simple method of setting an image on the site background.
Basic HTML tags for creating a background
So, let's move on to the issue, the background in html is full screen. In order for the site to look beautiful, you need to understand one rather important detail: it is enough to simply 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 to the entire width of the monitor. Initially, you need to choose an image or make a design yourself with such an extension in which you will display the site page. Only after the background image is ready, we transfer it to a folder called "Images". In it we will store all the used pictures, animations and other graphic files. This folder should be in the root directory with all your html files. Now we can move on to the code. There are several options for writing code that will change the background to an image.
- Write attribute tag.
- Through CSS style in HTML code.
- Write CSS style in a separate file.
It is up to you to decide how to make the background a picture in HTML, 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 there is a lot of the same code. And the third option is the most common and effective. Here are HTML tag examples:
- The first way to write is through the tag attribute (body) in the index.htm file. It is written like this: (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 as "Images", then the HTML code entry will look like this: (body background="Images/Picture.jpg")… (/body) .
- The second write 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 in: (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")).
How to make the background a picture in HTML, we have dismantled. Now you need to figure out how to stretch the image across the entire screen.
Ways to stretch the background image to the width of the window
Let's represent 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 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 full width and length of the monitor. How is this written in CSS style? Everything is simple!
background: url(Images/Picture.jpg")
background-size: 100% /* this entry will work for most modern browsers */
So we figured out how to make an image the background in html in full screen. There is another 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 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 background of the site an html image so that the image stretches to the full width of the screen in any of the modern browsers.
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 is enough just to prescribe this small addition with the help. You need to add one phrase after background: url(Images/Picture.jpg") fixed in style.css file; or add a separate line after the semicolon instead - position: fixed. Thus, your background image will become fixed. During scrolling through the content on the site, you will see that the text lines move, but the background remains in place.So you 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 an image the background of a table in html. Like everything and CSS style, 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 the writing of table rows and columns is denoted by the (tr) and (td) tags, respectively. To make the table background look like an image, add a simple phrase to the (table), (tr) or (td) tag 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 the background of the 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 in the background of the picture.
Now let's draw the same table with dimensions 2x3, but insert the 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 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 displayed equally correctly 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 era of smartphone development, many web developers are trying to create sites that are adapted to both mobile versions and a computer view.
