Changing the page background in html. Background color
From the author: Hello everyone. Background colors and images play a huge role in web design, as they allow you to design any elements more attractively. Today we will look at how to make a background in HTML.
Is it possible to use HTML to set the background?
I’ll say right away that no. In general, html was not created to design web pages. It's just very inconvenient. For example, there is a bgcolor attribute, with which you can set background color, but it's very inconvenient.
Accordingly, we will use Cascading Style Sheets (CSS). There are much more opportunities for setting a background. Today we will look at the most basic ones.
How to set background using css?
So, first of all, you need to decide which element you want to set the background to. That is, we need to find a selector to which we will write a rule. For example, if you need to set the background for the entire page as a whole, you can do this through the body selector, and for all blocks through the div selector. Well, etc. The background can and should be bound to any other selectors: style classes, identifiers, etc.
After you have decided on the selector, you need to write the name of the property itself. To set the background color (namely a solid color, not a gradient or an image), use the background-color property. After it you need to put a colon and write the color itself. This can be done in different ways. For example, using keywords, hex code, rgb, rgba, hsl formats. Any the method will work.
The most commonly used method is hexadecimal code. To select colors, you can use a program that displays the color code. For example, photoshop, paint or some online tool. Accordingly, as an example, I will write a 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
I'll use a small icon as the image. html language:
Let's create an empty block with an identifier:
< div id = "bg" > < / div > |
Let's give it 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 specifically for inserting a picture as a background to an html element. Let's see what happened:
To specify a picture, you must write after the colon keyword url, and then indicate the path to the file in parentheses. IN in this case The path is specified based on the fact that the image is in the same folder as the html document. You also need to specify the image format.
If you have done this, and the background is still not displayed in the block, check again whether you wrote the name of the image correctly, whether the path and extension are set correctly. These are the most common reasons that the background simply does not appear because the browser cannot find the image.
But did you notice one thing? The browser took and multiplied the image throughout the block. So, just so you know, this is the default behavior of background images - they are repeated vertically and horizontally as long as they can fit into the block. By this behavior you can easily control. To do this, use the background-repeat property, which has 4 main values:
Repeat – default value, the image is repeated on both sides;
Repeat-x – repeats only on axis x;
Repeat-y – repeats only along the y axis;
No-repeat – does not repeat at all;
You can write each value and see what happens. I'll write it like this:
background-repeat: repeat-x;
background - repeat : repeat - x ; |
Now repeat only horizontally. If you set no-repeat, then there would be only one picture.
Great, we can finish this now, since this basic capabilities work with the background, but I will show you 2 more properties that allow you to get more control.
Through repetition, layout designers used to be able to create 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 both sides, no transitions were visible, so the result was a single, seamless background. By the way, this approach should be used now if you want to use seamless texture on your website as a background. Today, a gradient can already be implemented using css3 methods, we will definitely talk about this later.
Background position
Default background image, if it is not set to repeat, will be in the left top corner your 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 located:
background-position: right top;
background - position : right top ; |
That is, vertically everything remains the same: the background image is located on top, but horizontally we changed the side to right, that is, right. Another way to set a position is as a percentage. In this case, the countdown begins in any case from the upper left corner. 100% - the entire block. Thus, to place the picture exactly in the center, we write it like this:
background-position: 50% 50%;
background-position: 50% 50%; |
Remember one important thing about positioning - the first parameter is always the horizontal position, and the second is the vertical position. So, if you see a value of 80% 20%, then you can immediately conclude that the background image will be shifted a lot to the right, but it won’t go down much.
And finally, you can specify the position in pixels. Everything is the same, only instead of % there will be px. In some cases, such positioning may be necessary.
Shorthand notation
Agree that the code turns out to be quite cumbersome if everything is set the way we did it. It turns out that the path to the picture needs to be specified, the repetition, and the position. Of course, repetition and position are not always necessary, but in any case, it would be more correct to use a shorthand notation for the property. It looks like this:
background: #333 url(bg.jpg) no-repeat 50% 50%;
background: #333 url(bg.jpg) no-repeat 50% 50%; |
That is, the first step is to record the overall 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 always write in abbreviated form, even if you only need to indicate a color or picture.
Controlling the size of the background image
Our current image isn't very good for demonstrating the next trick, so I'll take another one. Let it be the size of a block or larger. So, imagine that you are faced with the task of making a background image so that it does not completely fill its block. And the picture, for example, is even larger than the block size.
What can you do in this case? Of course, the simplest and most reasonable option would be to simply reduce the image, but it is not always possible to do this. Let's say it lies on the server and in this moment there is no time or 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 image now takes up all the space in the block, but I'll give it a background size:
background-size: 80% 50%;
background-size: 80% 50%; |
Again, the first parameter sets the horizontal size, the second - the vertical size. We see that everything was applied correctly - the photo became 80% of the width of the block in width and half in height. Here you just need to make one clarification - by setting the size as a percentage, you can influence the proportions of the picture. So be careful if you want not to upset the proportions.
As you can guess, the background size can also be specified in pixels. There are two more keywords that can also be used:
Cover – the image will be scaled so that at least on one side it completely fills the block.
Contain – scales it so that the image fits completely into the block at its maximum size.
The advantage of these values is that they do not change the proportions of the picture, leaving them the same.
You should also understand that stretching the 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 designing for desktops, you need to adapt the site to the main monitor widths: 1280, 1366, 1920. If you take a background image with a size of, say, 1280 by 200, and do not give it a background-size, then screens with a width larger will appear empty place, the image will not fill the width completely.
In 99% of cases, this does not suit the web developer, so he sets background-size: cover so that the image always stretches to the maximum width of the window. This good welcome, which should be used, but now you will face the problem that users with a screen width of 1920 pixels may see a suboptimal picture quality.
Let me remind you, it will stretch to its maximum width. Accordingly, the quality will automatically deteriorate. The only correct solution here would be to initially use a larger image – 1920 pixels wide. Then on the widest screens it will be in its natural size, and on others it will simply be gradually cropped, but at the same time, with proper selection of the background image, appearance This will not affect the site.
In general, this is just 1 example of how to use the knowledge you gained in this article when laying out real layouts.
Translucent background using css
Another feature that can be implemented using css is translucent background. That is, through this background it will be possible to see what is behind it.
As an example, I will set the entire page as the background to the image that we used earlier in the examples. For the block with identifier bg, on which we conduct all our experiments, we will set the background using the task format rgba colors.
As I said earlier, there are many formats for setting colors in CSS. One of them is rgb, enough 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 complete transparency.
In this post I will tell you as usual set the background to the site using HTML code.
I'll also show you an excellent foreign service by selection seamless backgrounds.
Nowadays, site 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 to 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 the new path 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. 🙂
When setting up any website, in addition to functionality, design is very important. This is what sets own style and the design of a particular company or person for whom the site is being created. Customizing the background color and image is easy by following the instructions in this article.
Open yours 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.
Enter in tag parameter bgcolor=”*****”, where ***** is the color code. You can find out the colors for HTML in any graphic editor by selecting the “for web” option or on the website https://colorscheme.ru/color-names
- style=”background-image: url(‘file:///C:/Users/FILE_PATH.jpg’)”
Please note that users with higher resolution screen, your image will be duplicated down and to the right. It won't look good if the picture is not monochromatic. There are special commands to correct this parameter.
- background-repeat : “Value.” Options for your value could be: “repeat-x” – repeats your background image both horizontally and vertically. “repeat-y” – repetition only vertically. “no-repeat” – the image is frozen in place and does not repeat. “space” – the entire page will be filled maximum number copies of the image, the outermost ones will be cropped. “round” – the same option, but the edges of the image will be carefully scaled;
- 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 take a value in pixels. For example: 100px 200px. In addition to pixels, percentage values are accepted. This is an 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 along the width.
Once you know the basics of filling a page with background in HTML, you are ready to create your first website.
To create a website, an important question is how to make a background in html. This procedure involves the use of certain tags - code words and letters. Thanks to them, you can put a different background, make it monochromatic - fill it, or put any picture in place of the background. Such actions will be very useful for all layout designers, and for those who decide to “dress up” their website on their own.
Making the background
Before you make the website background html, you need to open it in text editor html code pages. You need to remember that tags on the page are placed vertically. Then, between the tags
… , you need to put a tag- these tags are needed to clarify the style of the elements of a given web page. In place of the three dots you need to write - body (background:) . This is a parameter that allows you to set different styles for the page background. You can do the color setting operation in two ways. First:Body (background:#000000) – the page background should now be black.
This method is also suitable for setting both a color and a picture as a background. It is after the colon that you can put either a color code or a link to the picture. Or you can use a method that only means setting a color - a specific fill for the page. After the colon you need to write the so-called parameter – color. And after it, put the code of the color itself. This method is good if you use it as a template. Write it down and save it, and when necessary, set a color and put it on the page.
You can put a picture instead of a plain background. If you need to find out: in html, how to make a picture as a background, then similar operations need to be done. Write tags, put body (background: link to the picture). We must remember that the picture itself can be anywhere. And on a website on the Internet, but it’s best to create a folder in the root of the document. In the folder in which all information about the site page will be saved, you need to create another one - for pictures. The operation will look like this:
Now the picture you have chosen will be the background of the entire site page. We hope that you understand how to make a background in html. Just try and everything will definitely work out!
Open your file HTML pages for editing in the editor you are using. To do this, you can right-click on the document and select the “Open with” section.
The structure of an HTML file is a series of descriptors of various levels and purposes. The page code usually starts with the tag . After this there is usually a section
, which specifies the page title and CSS code. After the handle is closed, the page body begins . The attribute for setting the page background image is set as additional parameter background for of this tag. The code to create the page background will look like this:In this case, the path to the image can be a URL (starting with http://). The location can be specified from the root directory (/root/folder/background.jpg), or relative to the location of the edited HTML document(for example folder/background.jpg).
Save your changes and open the page in a browser. To do this, right-click and select “Open with”. In the list provided, indicate the name of the program you use to view pages on the Internet. If the background parameter was set correctly, you will see the previously specified background image. If the image is not displayed, check that the background attribute is specified correctly and the path to the background file.
bgcolor parameter
To set the background color without an image, you can use the bgcolor directive. As a value for this attribute, you can specify the name of the color on English language or use the color value in the HTML palette. For example:
This code gives the page a blue background. If you want to set a color tint or a more precise color, use the HTML palette values:
In this case, #002902 is the color that needs to be given to the page.
CSS Attributes
You can also set the background using CSS code in the options
:At CSS help you can specify and background picture for the page via background-image:
Using CSS and HTML gives the same results, however, when setting page display parameters, it is preferable to use CSS.