17.10.2015

Not yet

Hi all!
Let's continue learning the basics of HTML.
In this lesson I will tell you and show examples how to make a background from a color or picture in an HTML page.
It's quite simple!
Let's start with color!
I think you didn’t miss it, where I told you how to change the color of the text and at the end of the article I 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 them right away in this lesson.
So, how to make a background color in HTML...

Background color in HTML

The default background color in an HTML document is white. How to set the color as desired?
The “bgcolor” attribute will help us with this. To paint over 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 will be black.

The result will be like this:

If you want to make a background from a picture, then add the “background” attribute to the “body” tag:

Fill in any picture where your web page is (in my example, the page is called “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 understood everything. If you have questions, write in the comments.
I look forward to seeing you in the next lessons.

Previous post
Next entry

Almost every popular website has a nice appearance. An important part of website design is the background, also called background, which each of us can create or change. In this article I will tell you how to put a background on a website.

Making a new background for websites

To complete the task, you can use one of 4 methods:

• 1. Background with one color
• 2. Background with texture
• 3. Background using a gradient
• 4. Background from a large image

Create a background using one color

To create or change the background of the site, which consists of one color, you need to go to the file style.css, in which find the value - body (it is responsible for the main body of the site). Now you need to register the background-color function if it did not exist and specify the color code. In the case when you need to create a white background for a website, you will have to write the following code:

background-color: #83C5E9 ; (blue background, as in the example)

You can find a complete list of colors on the website - (STM). To change the color, simply change the value after the colon and enjoy your efforts.

Creating a background using texture

This method has been especially popular lately, as it allows you to create a beautiful background for the site. Textures can be simple but very beautiful, which is why they are often used. In order to connect any texture, you need to upload it to the image folder on the hosting where your site is installed. After this you should write the following code:

background-color: #537759;

background-image: url(images/pattern.png);

This code contains a familiar parameter for maintaining the color (it is green) and an element that is responsible for connecting the green texture.

Making a background using a gradient

Any image that is connected using css functions can be repeated both horizontally and vertically (along the axes X And Y). This opportunity allows us to create any simple background for the site with our own hands. To do this, you need to create a gradient 1 megapixel wide (see the image below), save it as an image and upload it to your hosting. After this, you can write the necessary code, namely:

background-color: #83C5E9;

background-image: url(images/gradient.jpg);

background-repeat: repeat-x;

In this set, in order of priority, there is a function responsible for the background color, which we use for reinsurance. After this, a parameter that is responsible for connecting the gradient and finally, a function that is responsible for repeating the gradient along the X axis.

Using a large image for the website background

This method is the second most popular, as it allows you to use various pictures to create a background. To implement this method, you only need to upload a large image to the site’s images folder and enter the following code:

background-color: #000000;

background-image: url(images/image title.jpg);

background-position: center top;

background-repeat: no-repeat;

If everything is clear with the first two parameters, then the last two need to be covered. The third function allows you to fix the image in the center of the site, and the last parameter blocks its repetition throughout the entire page structure.

Changing the background on ucoz websites

Those methods of creating a background for a site can be used on different content management systems, but not on sites - ucoz. In order to change the background for the ucoz website, you need to go to the site control panel, go to "Design Management", and then in "Editing templates".

Now you need to open the Style Sheet (CSS), find the line "body" and parameter "background". After this, you need to copy the link, paste it into your Internet browser and you will have access to the picture that was the background.

To use a new background, you just need to upload it to the File Manager. At the same time, make sure that the name of the new background image is the same as before the change. Save your work and go to the website to view the work done.

Changing the background for the site to HTML

If you want to make the background on an html site using an image, then simply enter the line in the code:

And if you want to make the background of the site using color, then the line should look like this:

This concludes our story. Now you know how to make a background for a website. Happy projects!

Good day to everyone who wants to learn and learn something new! Have you ever paid attention to the appearance, during the development of which the creators were too lazy to design the background of the pages? And I did. It looks bad. Often, due to the lack of the usual divisions between different types of information, it gets mixed up and there is simply no desire to look at anything further on such a web resource.

To prevent such a disaster from happening to me, I decided to write an article on the topic: “How to make a page background in html.” After reading the publication, you will learn what tools you can use to set the background design, how to make the background fixed or changing, and much more that will help make your site attractive. Now let's begin!

Basic tools for setting the background of web pages

To set a background image, web language developers provided the background attribute. It is available both in , and in css.

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

So, to set the background image through the html unit just write the following code: ... and instead of the words “file address” insert the path to the picture.

However, please note! If you want to see a single-color canvas as the 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 a special code, which consists of the # sign and six characters after it (for example, #FFDAB9).

When you type the second option in specialized software for developers, the palette will automatically appear in front of you. If you have just started learning these web languages, then you can look up the color code on the Internet.

Background as a property in cascading style sheets

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

On this note we can sum up our work. Join the ranks of my loyal subscribers, ask questions if something is unclear, 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

Many novice layout designers, just delving into the essence of creating websites, often wonder how to make the background an image in html. And even if some people can figure out this task, problems still arise when stretching the image across the entire width of the monitor. At the same time, I would like the site to be displayed equally on all browsers, so the cross-browser requirement must be met. You can set the background in two ways: using CSS style. Everyone chooses the most optimal option for themselves. Of course, the 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 tags of the site, but first, let’s look at a simple method of setting an image to the background of the site.

Basic HTML tags for creating a background

So, let's move on to the question, background in html on the whole screen. In order for the site to look beautiful, you need to understand one rather important detail: it’s enough to just make a gradient background or paint it with a solid color, but if you need to insert a picture into the background, it will not stretch across the entire width of the monitor. Initially, you need to select an image or make a design yourself with the extension in which your site page will be displayed. Only after the background image is ready, transfer it to a folder called “Images”. In it we will store all the pictures, animations and other graphic files we use. This folder should be in the root directory of all your html files. Now you can move on to the code. There are several options for writing code that will change the background to a picture.

1. Write tag attribute.
2. Through CSS style in HTML code.
3. Write CSS style in a separate file.

How to make the background an image in HTML is up to you, but I would like to say a few words about how it would be most optimal. The first method, using writing through a tag attribute, has long been outdated. The second option is used in very rare cases, only because a lot of the same code is obtained. And the third option is the most common and effective. Here are HTML examples of tags:

1. The first way to write is through the tag attribute (body) in the index.htm file. It is written in the following form: (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 “Images”, then the HTML code entry will look like this: (body background="Images/Picture.jpg")… (/body) .
2. The second recording method affects the CSS style, but is written in the same file called index.htm. (body style="background: url("../Images/Picture.jpg")").
3. And the third recording method is made in two files. In a document called index.htm, the following line is written: (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")).

We've discussed how to make a background image in HTML. Now you need to understand how to stretch the image across the width of the entire screen.

Ways to stretch a background image to the width of the window

Let's imagine our screen in percentage form. 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 entire width and length of the monitor. How is this written in CSS style? It's simple!

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 as a background in html to fill the entire screen. There is also a 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 allocate 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 a website an HTML image so that the image stretches across the entire width of the screen in any modern browser.

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’s easy enough to write this small addition with help. You need to add one phrase in the style.css file after background: url(Images/Picture.jpg") fixed; or instead add a separate line after the semicolon - position: fixed. Thus, your background image will become motionless. During Scrolling through the content on the site, you will see that the text lines move, but the background remains in place.So you have 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 a picture as a table background in HTML. Like all CSS styles, this web programming language is quite simple. And the solution to such a problem would be to write a couple of lines of code. You should already know that the writing of table rows and columns is referred to as (tr) and (td) tags respectively. To make the table background in the form of an image, you need to add a simple phrase to the (table), (tr) or (td) tag indicating a link to the image: background = URL of the image. For clarity, let's give a couple of examples.

Tables with a picture instead of a background: HTML examples

Let’s draw a 2x3 table and make its background a picture 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). This way our table will be painted into the background of the picture.

Now let’s draw the same plate with dimensions 2x3, but insert a 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 have registered, and not in the entire table.

Cross-browser compatibility of the site

There is also such a thing as cross-browser compatibility of a web resource. This means that site pages will be displayed equally correctly in different types and versions of browsers. In this case, you need to adjust the HTML code and CSS style to the required browsers. In addition, in the modern era of smartphone development, many web developers are trying to create sites adapted for both mobile versions and computer views.

Any room will look much better if its floor is covered with an expensive Persian carpet. So why is your website worse? Maybe it’s time to “cover” its floor with an expensive, elegant handmade rug. Let's take a closer look at how to make a background for a website:

Background for the site

It happens that the old website design has become boring. And I want something new and tasty. And the new design will be the same if you make it yourself.

But completely changing the entire design of a resource on your own is a thankless task. And not everyone’s hands are properly trained for this task. Therefore, the easiest way to refresh an old template is to change the background color of the resource or its background image.

There are several ways to change the background on a website. For this, the capabilities of CSS or html are used. But many of the properties for working with the background have the same name and method of application in these web technologies.

Basics of working with backgrounds in html

Several elements can be used as a background:

• Color;
• Background image;
• Texture image.

Let's look at the use of each of them in more detail.

To set the background color for a site, use the background-color property of the style attribute. That is, to set the main color for a web page, you need to write it inside the tag . For example:

Website background #55D52B

In addition to the hexadecimal color code, a value in keyword or RGB format is supported. Examples:

Website background rgb(23,113,44)

Website background green

Setting the background color using keywords has a number of limitations compared to the other two methods.

HTML supports only 16 keywords to set colors. Here are a few of them: white, red, blue, black, yellow and others.

Therefore, in order to set the background for an html site, it is better to use hexadecimal or RGB format.

In addition to color selection, other customization options are 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 let's look at the capabilities of the hypertext language for setting a background image for a site. This can be done using the background-image property.

As you can see from the code, the image is linked through the url path specified in parentheses. But not all pictures are so large that their size fills the entire screen area. Let's see how the smaller picture will be displayed.

Suppose we are developing a website about poetry, and we need to use an image of Pegasus as the background. The winged horse will personify 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:

Perhaps four smiling horses with wings will be too much inspiration for poets. 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 – repetition is prohibited.

Among the listed options, we are interested in the last one. Before changing the background of the site, we use it in our code:

But, of course, it would be better if our flyer was located in the middle of the screen. The background-position property is precisely intended for positioning the background image on the page. You can set location coordinates in several ways:

• Keyword ( top, bottom, center, left, right);
• Percentage – counting starts from the upper left corner;
• In units of measurement (pixels).

Let's use the simplest centering option:

It happens that you need to fix the position of a picture when scrolling. Therefore, before making an image as the background of the site, use the special property background-attachment . The values ​​it accepts are:

• scroll;


• fixed.

We need the last value. Now our example code will look like this:

Website texture background

In the first example we used a large and beautiful desert landscape for the background. But you have to pay in full for such beauty. The weight of an image made in high quality can reach several megabytes.

This volume does not in any way affect the page loading speed of the browser with a high-speed Internet connection. But what about the mobile Internet, when using it, loading several “meters” will take a lot of time?

All these problems are solved with the help of a textured background. It uses a small image as a texture pattern. Even if it is repeated many times, the drawing is loaded only once.