17.10.2015

Not yet

Hello!
We continue to learn the basics of HTML.
In this lesson I will tell you and show with examples how to make background from a color or image in an HTML page.
It's pretty simple!
Let's start with color!
I think you did not miss it, where I told you how to change the color of the text and at the end of the article gave codes for different colors and shades. Why did I remind you of this lesson? Yes, because there is a table with ready-made color codes, take them and practice right away in this lesson.
So, how to make background color in HTML ...

Background color in HTML

The default background color in an HTML document is white. How do you set the color you want?
The attribute "bgcolor" will help us with this. To paint the background, add this attribute to the "body" tag:

Or like this:

Here is the complete HTML code:

The page text will be green and the background black.

The result will be like this:

If you want to make a background from an image, then add the "baсkground" attribute to the "body" tag:

Fill in any picture where your web page is located (for example, my page has the name "fon" with the extension ".gif"):

Here is the complete HTML code:

The result will be like this:

If the background image is located in the images folder or some other folder, it will look like this:

Here is the complete HTML code:

Page text on a beautiful background.

That's all for today! I think the lesson was not difficult and you understand everything. If you have any questions, write in the comments.
I am waiting for you in the next lessons.

Previous post
Next post

Good day to all who wish to learn and learn something new! Have you ever paid attention to appearance, in the development of which the creators were too lazy to design the background of the pages? And I converted. It looks pathetic. Often due to the lack of divisions we are accustomed to between different kinds information, it is mixed and the desire to look further on such a web resource simply disappears.

So that such a misfortune does not happen to me, I decided to write an article on the topic: "How to make a page background in html". After reading the post, you will learn what tools you can use to set the background, how to make the background fixed or changeable, and much more that will help make your site attractive. Now let's get started!

Basic tools for setting the background of web pages

The background attribute was provided by web language developers to set the background image. It is available in both css and css.

In markup, it is an attribute of the body tag, and in style sheets, it is universal property, which allows you to set up to 5 characteristics of the background at the same time. Background is a fairly flexible element that can be used to set a background in the form of a single color, color image, or even animation.

So, to set background image via html unit it is enough to write code like this: ...

and instead of the words "file address" insert the path to the picture.

However, mind you! If you want to see a plain canvas as a background, specified by a value from the color palette, then this is done using the bgcolor attribute.

For example, ...

, we have set a black background for our site.

Colors in css and html are specified either by an English word (for example, red), or by a special code that consists of the # sign and six characters after it (for example, # FFDAB9).

When typing the second option in specialized software products for developers, the palette will automatically appear in front of you. If you have just started studying these web languages, then the color code can be spied on the Internet.

Background as a property in cascading style sheets

It is set either in separate file with css styles, or in an element

On this note, we can summarize our work. Join the ranks of my loyal subscribers, ask questions if something is not clear, and do not be greedy with a link to my blog, but share it with your friends. I wish you a pleasant learning experience. Bye Bye!

Best regards, Roman Chueshov

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

Open your HTML file by means of a notebook or any other text editor you are used to. For example, let's take a primitive website page with a minimum of text. You can open your file using any browser.

First, change the color of your background, as people with slow internet connections may not be able to see the background image of the site right away. For a certain amount of time while the image is loading, they will only be able to see the color of your site.
Write in the tag parameter bgcolor = ”*****”, where ***** is the color cipher. You can find out the colors for HTML in any graphic editor by choosing the option “for web” or on the website https://colorscheme.ru/color-names

You just need to select a color in the circle's palette and assign its intensity within the square. On the right, you will see two codes for html. Copy them and paste them into notepad.

After picking up a color and pasting it into the code, see if you did everything right by viewing the resulting web page from a browser.

Now you can start inserting the background image. Place the desired picture in the code folder for more convenience. Give it a name in Latin letters.

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

Copy the address from your browser's search bar.

Now in tag enter the line:

• style = ”background-image: url (‘ file: /// C: /Users/FILE_PATH.jpg ’)”

Save your file.

Check your webpage. You will see that the background is matched to your text.

Please note that for users with a higher screen resolution, your image will be duplicated down and to the right. It will not look good if the picture is not monochromatic. There are special commands to fix this parameter.

• background-repeat: “Value“. Options for your value could be: “repeat-x” - repeats your background image both horizontally and vertically. “Repeat-y” - repeat only vertically. “No-repeat” - the image is frozen in place and does not repeat. “Space” - the whole page will be filled maximum number copies of the image, the outer ones will be cut off. “Round” is the same option, but the edges of the image will be scaled neatly;
• background-attachment: “Value”. If you substitute the "scroll" tag instead of the word Value, the image will scroll along with the site. “Fixed” - the background remains unchanged when scrolling;
• background-size: Value Value2. Here the values ​​must be in pixels. For example: 100px 200px. In addition to pixels, values ​​are accepted as percentages. This is the option to fill the page with an image. In addition to numbers, you can enter two parameters: “contain” - fills the page with an image along the long side and “cover” - fills the page with an image in width.

Now that you know the basics of filling a page with a background in HTML, you are ready to create your first website.

In html, the background for the site is not set, it is written through css styles, but this is only a theoretical formality. Now let's find out how to define this background.

Background for a site or a separate block

Since we need a css file to accomplish this goal, we need to create it and connect it to html. This is written about in this article. After that, you can start working. First, you need to decide what you want to set the background to. If the whole page as a whole, then you can do it like this:

Body (
Background-color: white;
}

That is, we refer to the body tag, which represents our entire page. The background-color property is used to set the background color. But what if you want to set the background to a picture rather than a solid color? Then it's worth writing like this:

Body (
Background-image: url (path to image. Image extension)
}

For clarity, I propose to consider everything in more detail with an example. For this I will use the following picture:

For example, background-image: url (comp.png). In this example, we set a background image called comp (that's what I called it) png format which is located in the same folder as the css file.
In html, we will create an arbitrary block with specific dimensions in order to demonstrate the work of css properties on it.

And here are the styles for it:

#ct (
Background-image: url (comp.png);
width: 600px;
height: 400px;
}

Here's what we got:

Why is that? The fact is that by default the browser repeats the picture so many times to completely fill the block. Sometimes this is necessary, for example, when using seamless ornaments, but in our case there should be one picture. Fortunately, this can be controlled very easily.

Repeating background

If you have a picture as a background, then by default it will repeat horizontally and vertically to fill the entire page space. To remove this, the background-repeat property and its no-repeat value are used. There are also such values:

• Repeat-x - repeat horizontally only
• Repeat-y - vertical only

Let's add to the properties of our graphic background:

Background-repeat: no-repeat;

Position

The background-position property determines where the picture will be located. Two values ​​are set here - horizontal and vertical. Examples: background-position: right bottom - position at the bottom right corner, top-left - at the bottom top (and so on by default), 250px 500px - offset from the left top corner to the right by 250 pixels and down by 500.

Let's have a better look at examples:

Background-position: top right;

The picture will move to the top right edge. I also gave the block a yellow background to show its edges.

background-position: 50% 50%;

The image appeared exactly in the center in its block. Yes, this is also possible thanks to the percentage recording of the position.

background-position: 70% 20%;

The background is shifted 70% horizontally, and 20 vertically.

It is also allowed to specify a negative position value in pixels. This can be done, for example, when you are using a large sprite image and you need to put the required part of this sprite in the block.

Anchor the background

I also really like one property called background-attachment. It has only two values ​​and the first is the default (scroll). This means that when the page is scrolled, the background will also scroll, and if you use a picture without repetitions, then in the end it will end and just a solid color will go further.

To prevent this from happening, background-attachment: fixed is written and now our background is securely fixed in place. This can be compared to how a block is defined with a fixed positioning and it will not disappear from the page when scrolling.

Abbreviated notation of all this good

We have analyzed many properties that allow you to make a background, but if you apply all of them, you get a cumbersome record. There is a very elegant solution. The background property allows you to write a space separated desired settings in this order:
Background: color image repetition docking position;
And now everything can be written like this:

Background: yellow url (comp.png) no-repeat 20% 100px;

If some property does not need to be defined, then it is simply omitted (in our case, we did not write background-attachment).

Many backgrounds

But what if you need multiple background images? It happens, what to do. Today css supports this feature. Come on and we'll try. Let's take this icon

I named it laptop.

And here is the code to insert the multi-phone:

Background: url (comp.png) no-repeat 20% 100px,
url (laptop.png) no-repeat 50% 50%;
background-color: yellow;

As you can see, you just need to put a comma after the first image and write the settings for the second. In this case, it is better to set a solid color separately.

In the same way, you can record as many pictures as you like, but do not overdo it - too much graphics is not very good.

This is where I would like to end this article. You can do a lot of other interesting things with the background, I will try to write about them in the future (and I have already written something - for example). Successful study of this property.

Setting the background color and / or image for a page or its individual element is quite simple. The main thing is to know where and how this can be done, as well as to have a color code and / or a background image. It is possible that you will learn a lot from this article, but I created it especially for beginners. Therefore, everything will be as short and detailed as possible at the same time. The main thing is that you will get not only general idea and ready-made examples, but also an understanding of how to make a background in HTML.

To set the background in HTML, use an intermediate DOCTYPE

I'll start with the fact that in HTML5 there is no way to ask. It was decided to move this feature to CSS. Therefore, if you plan to use the below stated, and want to get a valid (correct) code, you need to stop at the transitional type of document. To do this, your web page must start with the following line:

Transitional// EN "" http://www.w3.org/TR/html4/loose.dtd ">

Now that we've figured it out, let's move on to understanding how the background is created. And the first thing to note here is the difference between background color and background picture... In the beginning goes background color, which fills all the available space of the page or its element. Overlaid on top of it is a repeating background picture... Visually, this can be depicted as follows:

Background of an HTML document and its elements

The second thing you need to know is the difference between body document and document element. Document body denoted in the HTML code of the web page by the BODY tag, which includes the entire content of the web page. Obviously, the background of the document body cannot be transparent. If the background of the document body is not specified, the default value set in the browser settings is used.

Page elements are inside the BODY tag. It is noteworthy that it is far from possible to set a color and / or background image using HTML for all elements of the document. For example, a background image can only be specified for tables. By default, they usually have a transparent background.

Bgcolor attribute to create background color

To ask background color the document or its elements use the bgcolor attribute, for example:

In this case, we are setting the background color for the page as a whole. And here is an example of how to set the background color for a table, in the TABLE tag:

Text with background

It is noteworthy that the background color in the table can be specified for both rows in the TR tag and for their cells in the TD tag.

How do I find out the color code?

You've probably already noticed that the color in HTML is set to a special color. code, for example: # ec008c. In order to find out the code of the color you need, you can use one of the graphic editors. For example, in Photoshop you can use “ Eyedropper tool»(Eyedropper) to get the color from a point in the picture. Then, you need to click the resulting color on the toolbar and in the opened window " Color picker»(Color selection) copy the color code.

I draw your attention to the fact that this code will be without a pound sign (#) at the beginning, this sign will need to be added manually.

You can also use numerous online services, For example:

• etc.

Their principle of operation is even simpler - you click the desired color and get its code.

Background attribute to create a background image

As in the case of the background color and in the case of background picture You need to use a special attribute, namely background, for example:

In this case, we set the background image for the page as a whole. It is noteworthy that due to the limitation of the size of the picture, it will be repeated, for example:

As you can see, when repeating, the transition between the pictures is noticeable. Therefore, special pictures are often used, where this moment is taken into account.

And here is an example of how to set a background image for a table, in the TABLE tag:

Text with background

It is noteworthy that the background image can be set only for the table as a whole and / or its individual cell. This will not work for a string.

Absolute and relative path to the background image

It is worth paying special attention to background picture address... In this case, the relative path to the picture is used, i.e. the address is specified relative to the location of the image file to the web page file. This option cannot be called particularly successful. It is best to use an absolute path to the picture, i.e. its full URL, For example:

In this case, you will not have any accompanying problems. You can read more about this.

Let's sum up

The use of bgcolor and background attributes is obsolete, so you have to use the transient DOCTYPE for HTML code to be valid. To set the background color in HTML, it uses special codes that you can find out in a graphical editor or using special online services. The background image is duplicated in the aisles of the area allocated to it and overlays the background color. It is better to use its full URL to specify the background image. That's all for me. Thank you for your attention. Good luck!

at 22:37

Change message