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 image is easy by following the instructions in this article.
Open your HTML file using notepad 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.
Write in the tag parameter bgcolor = "*****", where ***** is the color cipher. You can find out the colors for HTML in any graphic editor by selecting the option “for web” or on the website https://colorscheme.ru/color-names
- style = ”background-image: url (‘ file: /// C: /Users/FILE_PATH.jpg ’)”
Please note that for users with higher screen resolutions, 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 entire page will be filled with the maximum number of 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.
Vlad Merzhevich
Due to the peculiarities of web pages, background images acquire a significant role in the layout of site documents. At the same time, they are actively involved in a variety of activities, for example, automating the process of attaching pictures to text, creating gradient transitions and, of course, adding a background under the content. Some aspects of the use of background images are discussed below.
Background on web page
Setting a background image on a web page traditionally occurs through the background attribute of the tag
... Such a pattern is repeated horizontally and vertically, filling in this way the entire browser window. It is clear that there are no special options for creativity here, so let's turn to the styles and see what you can do with CSS.There are five attributes in CSS that control the background image: its addition, position, and repetition. However, all these parameters are replaced by one universal property background, and we will use it in the future.
Adding a background picture
An image is added by setting the image address using the url keyword. To control the repetition of the picture, the arguments no-repeat (no repetition), repeat-x (horizontal repetition) and repeat-y (vertical repetition) are used. This allows you to get the web page shown in Fig. one.
To set a picture on a web page, add the background style property to the BODY selector, as shown in Example 1.
Example 1. Wallpaper
In this example, the graphic target.gif is defined as the background of the web page without repeating the image. To prevent the image from snuggling to the edges of the browser, it is offset 30 pixels to the right and 20 pixels down from its original position.
Pattern repetition
Due to the fact that you can set the wallpaper to repeat horizontally or vertically, several options are available for the design of web pages. For example, to create a vertical stripe along the left edge (Figure 2), you need the image shown in Figure. 3.
The drawing should be such that it fits together vertically without noticeable seams, and also makes up a single whole with the specified background color of the web page. Example 2 shows how to create such a background image, again using the background property and its repeat-y value.
Example 2. Repeating the background vertically
Similarly, you can repeat the background horizontally, for example, by creating a gradient and setting it as a background image (Fig. 4).
To get the web page shown in Fig. 4, you will first need to make a picture with a gradient transition. The width is sufficient to specify 20-40 pixels, and the height of the picture depends on the purpose of the document and the expected height of the content of the web page. Do not forget that a large drawing will lead to an increase in the size of the graphic file. And this will negatively affect the speed of its loading and, ultimately, will lead to a slowdown in the display of the background. For this case, a picture with a size of 30x200 pixels was quite suitable (Fig. 5).
Example 3 shows the HTML code for creating a gradient background.
Example 3. Repeating the background horizontally
A gradient graphic works well with a solid color block, so this example adds a layer to display the content of the web page.
Adding a picture to text
With a background image, you can automate the process of adding pictures to specific text, such as headings. To do this, use the generic background property, which is applied to the desired selector. As a value, specify the path to the picture and, so that it does not repeat itself, the no-repeat argument (example 4).
Example 4. Adding a picture
Heading
Main text
As shown in this example, the picture can be shifted horizontally and vertically from its original position, by default this is the upper-left corner of the block element. Shifting the background allows you to set the image in relation to the text as desired. To prevent the text from overlapping the picture, be sure to add the padding-left property, due to which the text is shifted to the right by the specified distance. It is individual in each case and is usually equal to the width of the picture plus the desired spacing between the image and the text.
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 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 an intermediate DOCTYPE
And 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 transient 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 figured this 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. Body of the document 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 not 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 are setting 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 the 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 picture
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 outdated, 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 assigned 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 |
Good day to all who wish to learn and learn something new! Have you ever paid attention to the 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 absence of the divisions we are accustomed to between different types of 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 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 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 the following code: ... 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 instance,
..., 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 you type the second option in specialized software products for developers, the palette will automatically appear in front of you. If you have just started to study 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 a separate file with css styles, or in the element
First text
Second text
First text
Second text
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 html, the background for the site is not set, it is written through css styles, but this is just 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 in. 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 (image path. 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) in 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, use the background-repeat property and its no-repeat value. 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 in the lower right corner, top-left - in the lower upper corner (and so on by default), 250px 500px - offset from the upper left 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 upper right edge. I also gave the block a yellow background to show the 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 then 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 position and it will not disappear from the page when it is scrolled.
An abbreviated record of all this goodness
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 the necessary settings separated by a space in the following 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).
