Background image html. How to quickly insert a different background in Photoshop

In this post I will tell you as usual set the background to the site using HTML code.

I'll also show you a great one foreign service by selection seamless backgrounds.
Nowadays, website settings are made easier and more convenient through CMS consoles such as WordPress.
It may be necessary to change the templates of selling websites, this article will help with this.

If you don't know what it is HTML, then this can be generally called the language of sites or a set of rules by which sites are generated.

For example, you see a picture on a website, but in the HTML code of the page it may look like this:

Set a solid color to the page background.

In order to install solid color background, need in tag add attribute bgcolor.

< html >
< head >
< title >Page title.

< body bgcolor = "#ffcc00" >

You can this code insert into text file and save with the extension .html. Then open it with any browser and see the result.

As you probably guessed, the background color appears due to the color code in the attribute bgcolor= "value", which can be found by following this link.

Setting an image to the background of an HTML page.

In order to set image to background, 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 equals the path of the file that is used as the background.

To quickly change the background or any picture on the page, just specify new way to your file using a text editor.

To find out the previous path, on the page with the picture, click on the picture right click and click on “Copy image URL.” this way you will see the name of the picture/background. Then you can simply replace the old image with your own, using the same file name.

These were the simplest basics for setting up background in html, now comes the interesting part. 🙂

Setting a background color and/or image for a page or its individual element is quite simple. The main thing is to know where and how to do this, as well as have a color code and/or background image. It is possible that you will learn a lot of new things from this article, but I created it specifically 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 a 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 the intermediate DOCTYPE

And I'll start with the fact that in HTML5 it is not possible to set . It was decided to add this feature to CSS. Therefore, if you plan to use the following and want to get valid (correct) code, you need to choose the transitional document type. To do this, your web page must start with the following line:

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

With that out of the way, 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. At the beginning it goes background color, which floods everything available space 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 of the document And document element. Document body is indicated in the HTML code of a 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 document body background is not specified, the default value specified in the browser settings is used.

Page elements are inside the BODY tag. It is noteworthy that you can set the color and/or background image using HTML This is not possible 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.

The bgcolor attribute to create a background color

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

IN in this case we set 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:

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 to find out the color code?

You've probably already noticed that color in HTML is set to a special 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» (Pipette) to obtain color from a point in the picture. Then, you need to click the resulting color on the toolbar and in the window that opens “ Color Picker» (Color selection) copy the color code.

Please note that this code will not have 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 operating principle is even simpler - click the desired color and get its code.

The background attribute to create a background image

Same 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 are setting a background image for the page as a whole. It is noteworthy that due to the limitation of the size of the image, it will be repeated, for example:

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

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

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

Absolute and relative path to the background image

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

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

Let's sum it up

The use of the bgcolor and background attributes is obsolete, so for the validity of the HTML code you will have to use the transitional DOCTYPE . For the task background color in HTML uses special codes that you can find out in graphic editor or using special online services. The background image is duplicated within the area allocated to it and lies on top of the background color. To specify a background image, it is better to use its full URL. That's all I have. Thank you for your attention. Good luck!

Good day to everyone who wants to learn and learn something new! Have you ever noticed 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 us different types the information gets mixed up and there is simply no desire to continue looking at anything 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 web page backgrounds

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 via 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 solid color as the background, given value from the color palette, 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 special code, which 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 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 specified either in 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

Welcome to my blog. We continue to comprehend html basics. This tutorial will be so simple and interesting that I hope you will want to learn more about programming languages. In just a couple of minutes you will learn how to make a picture as a background in HTML and achieve excellent results.

I will also talk about some nuances that will make the background as smooth and beautiful as possible. Well, shall we begin?

Selecting a picture

I would like to start by choosing an image. So that you look more even and beautiful on the page, and you don’t have to bother with sizes and alignment. I suggest immediately looking for seamless textures. What it is?

Unfortunately, it is impossible to stretch an image in html to fill the entire screen. The photo is used in actual size. If the picture is small, then it will cover the entire area, as in the screenshot below. To stretch the image you will have to create an additional css document, without this it won’t work.

Although, you have the opportunity to bypass the system. To do this, use Photoshop and pictures up to the width of the screen (1280x720). Although in this case, when scrolling down, the picture will replace another.

Much the best option if you don't want to use css there will be use seamless textures. They don't have any visible joints. They are like wallpaper or modern tiles in design. One replaces the other and no joints are visible.

If you are interested in the absence of legal consequences for their use, then I recommend searching the website Pixabay.com .

HTML

Now let's work with the code. I should note right away that we are now working with html, that is, we are changing the image not for the entire site, but only for one specific page, for which the code is written. If you are interested in changing the entire resource, then you need to code using css, But more on that later.

So, you can work in notepad, I prefer NotePad++. It’s much more convenient to work in it: the code is completed for you, the tags are highlighted. The program is free and weighs about 3 MB. I highly recommend it, especially if you are a beginner.

So, to the tag body you need to add attribute background and indicate a link to the image where the picture will be taken from. This is what it looks like in the program.

You can just open notepad and copy this code. In quotes, put a link to the picture you like.

I would like to note for beginners, this is the point. If you take an image from Pixabay, then you need to paste the link not on the page with the image, but open the image in the next tab.

Copy this exact URL.

Save the document. Don't forget that if you use notepad, you need to use the extension .html . Just name the document, for example, back.html . Otherwise it will be saved as Text Document and the browser simply won’t understand what it needs to do.

Done, the page is filled with a different color.

If you want to learn more about html, I suggest you download free course Evgenia Popova . From it you will learn more tags, language capabilities, try some new techniques and know more.

I won’t say that Evgeniy Popov’s courses are wildly popular. Many experts scold him, and if you have come across such statements, then here is my opinion. These lessons are provided free of charge and despite this they do an excellent job of their main task - to show the beginner the basics and bring him up to date.

Just as every writer has his own view of how to write, so programmers have their own style. You can spend your whole life learning how to create websites, but you need to start somewhere. From books? Not this. Yes, they contain more reliable information, up-to-date information, but they are so difficult to master.

Don't agree with me? I can offer an alternative. Book by Elizabeth and Erica Freeman Learning HTML, XHTML and CSS " Not a very boring bestseller and was released not so long ago, in 2016. The information has not yet become outdated.

CSS

If you need the background to be repeated on all pages of your site, then CSS is a must. Of course, you can specify the path each time, as in the previous chapter. But imagine if over time you need to replace it: the link becomes outdated or you simply want to change the design. Go to every page and change the code? This will not work.

CSS helps solve this problem. You need to create a file with css extension and enter the following code:

Let's talk a little about the code itself. In parentheses, after url you can enter a link to the image from third party source, or simply the name of the document, if the picture is in the same folder as this file.

For those who want to know better

At css help you can stretch background image, make sure it doesn’t repeat itself, add GIF animation and much more.

You can’t write everything in one article. And I didn’t set such a task for myself. There are a lot of subtleties, and if they promise to tell you everything in one article, then this is nothing more than a deception.

Do you want to learn how to write websites correctly? I recommend that you learn programming languages. I can recommend Andrey Bernatsky’s course “ HTML5 and CSS3 from Zero to Pro " I really like this author. I did not take this particular course; several years ago there was something similar, but less modern.

The author talks very nicely, everything is easy and understandable. The highlight of this course is that you don’t just study, you create a specific website together with the teacher. As a result, you will get a business card, a blog and even an online store. Very cool. You can watch the first three theoretical lessons on HTML5 from this course right here and now.

By the way, along with this course you get 7 bonuses: the basics of html and css by Andrei Bernatsky, layout for beginners, creating a landing page in an evening and much more. Before you commit to serious training, try out the free course " Practice HTML5 and CSS3 ».

Well, that's basically all. Subscribe to the newsletter to learn more. Very soon I will tell you a little more about adaptive layout, increase earnings from any blog and give you a lot useful tips about simplifying work. See you again and good luck in your endeavors.

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 for themselves best option. Certainly, CSS style 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 we will consider a simple method of installing an image on 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 do gradient background or paint it 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 used pictures, animations and others graphic files. This folder should be in root directory with all yours 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 HTML examples 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 called “Picture” and 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 a website background html picture 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 picture will become motionless. As you scroll through the content on the site, you will see that text strings move, but the background remains in place. So you’ve learned how to make a background 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 writing table rows and columns are designated respectively as tags (tr) and (td). 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 the site pages will be displayed equally correctly in different types and browser versions. In this case, you need to customize the HTML code and CSS style to suit required browsers. Besides, in modern times development of smartphones, many web developers are trying to create websites adapted for mobile versions and under a computer view.