Tag img - empty, it contains attributes and it does not have a closing tag.
To display the image on the page, use the attribute src. Src came from source, which means Source. The src attribute value is url Images.
The line above means that the image is in the same directory (folder) as the html file itself that refers to this image. Let's say you have a folder htmlwhich contains index.html with the above code and the image itself with the name image.jpg.
In this case, when you open index.html in the browser you will see this image. If you have it somewhere else (on a folder above or below), then instead you will see either a white field or a small rectangle with a red cross (failed to load the image).
Images are not always in the same directory (folder) as the file itself, so prescribing paths will be described more specifically later.
Img tag attributes
In addition to src, the img tag has other attributes that are responsible for the size of the displayed image, its signature, and more. 
src - image address
width - image width
height - image height
title - signature that is displayed when you hover over the image
alt - alternative text. Needed for search robot and image indexing
border - thickness of the image border. 0 - no border, 1 - the thinnest border, etc.
The address of the inserted image (examples)
Usually, images not stored in the same folder as itself html file. To do this, a folder is created in the same directory images (or img, it tastes and color). And it already contains all the necessary images. In the case of separate storage, it will be necessary to prescribe a different address for the src attribute 
If the file is located on the folder above, then
You can also insert an image in general from another site, without downloading it to your folder. To do this, you must have a stable Internet connection and approximately the following code, in which you enter the address of the image on the Internet in the address:
HTML background image
As background image files with extensions may appear gif, jpg, jpeg and png. In the event that the image size is smaller than the browser window, the image will automatically further fill the remaining background. AT body use attribute backgroundin which we prescribe the path to the image12/27/14 55.8K
Any room will look much better if it is covered with expensive Persian carpet. So what is the worse your site? Maybe the time has come to “cover” his floor with an expensive elegant handmade palace. We will examine in more detail how to make a background for the site:
Background for the site
It happens that the old site design is already boring. And I want something new and tasty. And the new design will be such if you cook it yourself.
But to completely change the entire design of the resource yourself is an ungrateful thing. And not everyone has their hands sharpened under this business. Therefore, it is easiest to refresh the old template by changing the background color of the resource or its background image.
There are several ways to change the background on the site. To do this, use the capabilities of CSS or html. But many of the properties for working with the background have the same name and application methodology in these web technologies.
Html background basics
You can use several elements as a background:
- Colour;
- Background image;
- Texture image.
We will deal with each of them in more detail.
In order to set the background color for the site, the background-color property of the style attribute style is used. That is, to set the primary color for the web page, you need to register it inside the tag
. For example:Website Background # 55D52B
In addition to the hexadecimal color code, a keyword or RGB value is supported. Examples:
Rgb website background (23,113,44)
Green website background
Setting background colors using keywords has several limitations compared to the other two methods.
Html only supports 16 keywords for color. Here are a few of them: white, red, blue, black, yellow other.
Therefore, in order to set the background for the html site, it is better to use the hexadecimal format or RGB.
In addition to color selection, other settings are also available. If the background-color property is set to transparent, the background of the page will become transparent. This value is assigned to this property by default.
Now consider the possibilities of the hypertext language for setting the wallpaper for the site. This can be done using the background-image property.
As you can see from the code, the image is bound via the url path given in brackets. But not all pictures turn out to be so large as to fill the entire screen area with their sizes. Let's see how the smaller image will be displayed.
Suppose we are developing a site about poetry, and we need to use a Pegasus image as a substrate. The winged horse will embody the freedom of the poet’s creative thought!
We need the image to be displayed in the middle of the screen once. But, unfortunately, the browser does not understand our lofty desires. And it displays a smaller image for the background of the site as many times as the screen area can accommodate:
Probably four smiling horses with wings will be too much for poets to inspire. Therefore, we prohibit the cloning of our Pegasus. We do this using the background-repeat property. Possible values:
- repeat-x - repeat the background image horizontally;
- repeat-y - vertically;
- repeat - on both axes;
- no-repeat - repeating is prohibited.
Among the options listed, we are interested in the latter. Before changing the background of the site, we use it in our code:
But, of course, it is better if our flyer is located in the middle of the screen. The background-position property is designed to position the background image on the page. You can set location coordinates in several ways:
- Keyword ( top, bottom, center, left, right);
- Percent - the countdown starts from the upper left corner;
- In units of measurement (pixels).
We use the simplest centering option:
It happens that you need to fix the position of the picture when scrolling. Therefore, before making a picture the background of the site, use the special background-attachment property. The values \u200b\u200bhe accepts are:
- scroll;
- fixed.
We need the last value. Now the code of our example will look like this:
Textural site background
In the first example, for the background, we used a large and beautiful desert landscape. But for such beauty you have to pay in full. The weight of an image made in high quality can reach several megabytes.
This amount does not affect the page loading speed of the browser with a high-speed Internet connection. But what about the mobile Internet, using which downloading a few "meters" will take a lot of time?
Hello! In touch with you, your humble servant with a portion of useful and practical material on the topic of how to set the background for the site. This is the very beginning in the html layout and here I will demonstrate with an example how you can make a beautiful background for a site that will uniquely hook the Internet user and give originality.
If you noticed, then most Internet businessmen use a unique background in their sales and subscription pages. Today we will analyze the technical component of this process.
So, for starters, we need, of course, a picture. In the foreign Internet there is one very good site on which you can download different free pictures for website background. There are simply a lot of them there. The site is called Subtle Patterns.
It appears in the Google search list in first place, so I recommend it in my work. You can also find a large number of other sites if you type in the search engine such phrases as “background image patterns”, “download background image for site” and so on.
If you have no problems with the English language, then you will understand it without difficulty.
In this article, I selected a topic and it is called tweed. You can download it.
Here's how it looks in a small version on the site
First, create a new document in the program
And be sure to save it under the name before editing, for example index.html and create a folder on your computer, for example, you can create a “My site” folder and put our index file (index.html) in it. It’s better to create a folder in English so that there is no confusion between the browser and the website display incorrectly.
In addition, in the main folder “my site” you need to create two more subfolders, in one we will put all our images and it will be called “images”, and the other we will give the name “CSS” (cascading style sheets) and put the file there style.css
Now you can do the work in our document. The next step we need to insert a piece of html code, the so-called, the main frame from which it all starts. You can download it directly. Next, copy everything from this file and transfer it to our program file. The result should be something like the following
You will notice a red floppy disk next to the file name. So, if it is red, then the file is not saved, be sure to click on the save button so that the disk turns blue.
In the title tag, you can change the name of the document, for example, you can make “My first web page”. And make sure your page is encoded UTF - 8
Otherwise, if there is a different encoding, for example windows-1251, then the text of the document in the browser will be displayed in hieroglyphs. You can change the encoding in the section "Encodings - Encode in Utf-8 (without BOM)" on the program toolbar.
And do not forget to save our every action.
Now let's start creating the background in our document. I must say right away that all our actions on the design of the web page will occur using cascading style sheets called CSS, i.e. we will make the frame in html, and we will bring it to a beautiful style and look using CSS.
Thus you accustom yourself to the correct course of action. It is not necessary to deal directly with styles in an html document, it is better to place them in a separate document.
To do this, in our Notepad ++ program, create another file and name it Style.css and save it in a new css folder, which will be located in the “My site” public folder
Fine! In order for our browser to display the page correctly, we need to include the stylesheet in our html document. Here's how to do it.
Directly enter the entire line above. With this line we connect our stylesheet.
Now we will define a background image for our body tag through the stylesheet. To do this, we create the following structure in the style.css document (take and write directly in the program code)
I’ll explain a little here. The background attribute has many values, one of which is background-repeat, which is responsible for just stretching our background image for a web document.
BACKGROUND-REPEAT:
REPEAT // (replicate horizontally and vertically) REPEAT-X // (stretch only horizontally) REPEAT-Y // (stretch only vertically) NO-REPEAT // (do not repeat the background image)
In our case, we replicate our small picture both vertically and horizontally. As a result, the entire page is filled with our image. Here's what it looks like in the browser:
Also, specially for you, I made a selection of sites where you can download a beautiful background for the site
Modern browsers allow you to add an arbitrary number of background images to an element, listing the parameters of each background with a comma. It is enough to use the universal property background and specify for it at first one background and a second separated by commas.
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 versions of browsers, specific properties with prefixes should be used, as shown in Example 1.
How to add a wallpaper to a web page?
To add a background image to a web page, specify the path to the image inside the url 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 revive any document, so it is not surprising that Flash technology has gained immense popularity, which adds cartoons to web pages, moreover, interactive ones. The GIF graphic format also supports simple animations by sequentially changing frames. 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 GIF image, for which you can use the program Adobe Photoshop or another suitable 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 wallpaper in the lower right corner of the page?
To control the position of the background image on the page, the style property background-position is used, it simultaneously sets the image coordinates horizontally and vertically. To cancel repeating the background image, use the background-position property with a no-repeat value.
How to make background not repeat?
By default, the background image repeats horizontally and vertically, lining up a mosaic throughout the entire web page field. However, this background behavior is not always required, especially when placing a single image, so the no-repeat value, added to the background style property, will come to the rescue.
How to make the background repeat only vertically?
Repeating the background is usually required to create decorative lines or gradients that are tied to the height of the element or window of the web page. In such cases, repeating the background vertically provides a solid picture regardless of the size of the elements. Only at the beginning should you worry about the background image repeating without joints.
From the author: I welcome everyone. Background colors and images in web design have a huge role, as they allow you to more attractively design any elements. How to make a background in html, we will look at today.
Is it possible to do with html when setting the background?
I must say that no. In general, html is not designed to style web pages. It is just very inconvenient. For example, there is an attribute bgcolor, with which you can set the background color, but this is very inconvenient.
Accordingly, we will use cascading style sheets (css). There are much more opportunities for setting the background. Today we will analyze the most basic.
How to set background via css?
So, first of all, you need to decide which element needs to set the background. That is, we need to find a selector to which we will write the rule. For example, if you want to set the background of the whole page as a whole, you can do this through the body selector, to all blocks through the div selector. Well, etc. The background can and should be attached to any other selectors: style classes, identifiers, etc.
After you have decided on the selector, you need to write the name of the property. The background-color property is used to set the background color (namely, a solid color, not a gradient and not a picture). After it, you need to put a colon and write the color itself. This can be done in many ways. For example, using keywords, hex code, rgb, rgba, hsl formats. Any way would do.
The most commonly used hexadecimal code method. To select colors, you can use the program, which shows the color code. For example, photoshop, paint, or some online tool. Accordingly, for an example I will prescribe the general background for the entire web page.
body (background-color: # D4E6B3;)
This code needs to be inserted into the head section. It is important that the files are in the same folder.
Picture as background
As a picture, I will use a small html language icon:
Create an empty block with the identifier:
< div id = "bg" > < / div > |
Let’s set its explicit dimensions and background:
#bg (width: 400px; height: 250px; background-image: url (html.png);)
#bg ( width: 400px; height: 250px; background - image: url (html. png); |
From this code you can see that I used a new property - background-image. It is intended just to insert a picture as a background to an html element. Let's see what happened:
To specify a picture, you must write the url keyword after the colon, and then specify the path to the file in parentheses. In this case, the path is indicated on the basis that the image is in the same folder as the html document. You must also specify the image format.
If you have done this, but the background still does not appear in the block, check again that you spelled the name of the picture correctly, if the path and extension are set correctly. These are the most common reasons that the background simply does not appear, as the browser cannot find the image.
But have you noticed one feature? The browser took and multiplied the image throughout the block. So, for you to know, this is the default behavior of background images - they are repeated vertically and horizontally until they can fit into the block. You can easily control this behavior. To do this, use the background-repeat property, which has 4 main values:
Repeat - the default value, the image is repeated on both sides;
Repeat-x - it is repeated only on ois x;
Repeat-y - repeats only along the y axis;
No-repeat - does not repeat at all;
You can prescribe each value and see what happens. I will write it like this:
background-repeat: repeat-x;
background - repeat: repeat - x; |
Now the repetition is only horizontal. If you register no-repeat, then there would be only one picture.
Well, it’s already possible to finish here, since these are the basic features of working with the background, but I will show you 2 more properties that allow you to get more control options.
With the help of repetition, layout designers used to achieve that they created background textures and gradients using one tiny image. It could be 30 by 10 pixels or even smaller. Or maybe a little more. The image was such that when it was repeated on one or even on both sides, no transitions were visible, so that in the end a single solid background was obtained. By the way, this approach should be used now if you want to use a seamless texture on your site as a background. Today, the gradient can already be implemented using css3 methods, we will definitely talk about this later.
Background position
By default, the background image, if no repetition is specified for it, will be in the upper left corner of its block. But the position can be easily changed using the background-position property.
You can set it in different ways. One option is to simply indicate the sides in which the picture should be:
background-position: right top;
background - position: right top; |
That is, everything remained the same vertically: the background image is on top, but horizontally we changed the side to right, that is, the right one. Another way to set a position is in percentage. The countdown in this case begins in any case from the upper left corner. 100% - the whole block. Thus, to place the picture exactly in the center, write it like this:
background-position: 50% 50%;
background - position: 50% 50%; |
Remember one important thing related to positioning - the first parameter always indicates the horizontal position, and the second - vertical. So, if you see a value of 80% 20%, then you can immediately conclude that the background image will be shifted strongly to the right, but will not go much down.
And finally, you can specify the position in pixels. Everything is the same, only px will be px instead. In some cases, such positioning may be necessary.
Short record
Agree that the code is quite cumbersome if everything is set in the way we did. It turns out, and the path to the picture needs to be set, and repetition, and position. Of course, repetition and position is not always necessary, but in any case, it would be more correct to use a shorthand property record. It looks like this:
background: # 333 url (bg.jpg) no-repeat 50% 50%;
background: # 333 url (bg.jpg) no-repeat 50% 50%; |
That is, first of all, you need to record a common solid background color, if necessary. Then the path to the image, repetition and position. If some parameter is not needed, then simply omit it. Agree, this is much faster and more convenient, and we also significantly reduce our code. In general, I advise you to record in abbreviated form always, even if you need to specify only the color or picture.
We control the size of the background image
Our current image is not very suitable for demonstrating the next trick, so I'll take another one. In size, let it be like a block or more of it. So, imagine that you have a task: to make a background image so that it does not completely fill its block. A picture, for example, is even larger than the block size.
What can be done in this case? Of course, the simplest and most reasonable option would be to simply reduce the picture, but it is not always possible to do this. Let's say it is on the server and at the moment there is no time and opportunity to reduce it. The problem can be solved using the background-size property, which can be called relatively new and which allows you to manipulate the size of the background image, and indeed any background.
So, my picture now occupies all the space in the block, but I will give it the background size:
background-size: 80% 50%;
background - size: 80% 50%; |
Again, the first parameter sets the horizontal size, the second - vertical. We see that everything was correctly applied - the photo became 80% of the width of the block in width and half in height. Here you only need to make one clarification - by setting the size in percent, you can affect the proportions of the picture. So be careful if you want to not upset the proportions.
As you can guess, the background size can also be specified in pixels. There are two more meaning keywords that you can also use:
Cover - the image will be scaled so that at least on one side it completely fills the block.
Contain - scales so that the picture completely fits into the block at its maximum size.
The advantages of these values \u200b\u200bare that they do not change the proportions of the picture, leaving them the same.
You should also understand that stretching a picture can lead to a deterioration in its quality. I can give an example from the life and real practice of layout designers. Everyone knows and understands that when making layouts for desktops, you need to adapt the site to the main monitor widths: 1280, 1366, 1920. If you take a background image of, say, 1280 by 200, and don’t give it a background-size, then the screens are wider an empty space will appear, the picture will not fill the width completely.
In 99% of cases, this does not suit the web developer, so he sets the background-size: cover so that the picture always stretches to the maximum width of the window. This is a good technique to use, but now you will encounter the problem that users with a screen width of 1920 pixels can see a picture of suboptimal quality.
I recall, it will stretch to the maximum width. Accordingly, the quality will automatically deteriorate. The only correct solution here would initially be to use a larger image - 1920 pixels wide. Then on the widest screens it will be in its natural size, while on others it will simply be cropped off slowly, but at the same time, with proper selection of the background image, this will not affect the appearance of the site.
In general, this is just 1 example of how to use the knowledge you gained in this article in the layout of real layouts.
Translucent background using css
Another feature that can be implemented using css is a translucent background. That is, through this background it will be possible to discern what is behind it.
For example, I will set the entire page as the background image that we used earlier in the examples. For the block with the identifier bg, on which we conduct all our experiments, we will set the background using the rgba color format.
As I said earlier, css has many formats for specifying color. One of them is rgb, a fairly well-known format for those who work in graphic editors. It is written like this: rgb (17, 255, 34);
The first value in brackets is the saturation of red, then green, then blue. The value can be numeric from 0 to 255. Accordingly, the rgba format is no different, only one more parameter is added - the alpha channel. The value can be from 0 to 1, where 0 is full transparency.
