Background picture. Setting a seamless background in HTML

Vlad Merzhevich

Due to the peculiarities of web pages, background images play a significant role in the layout of site documents. At the same time, they are actively involved in a variety of things, for example, automating the process of attaching pictures to text, creating gradient transitions, and, of course, adding a background under the content. Below are some aspects of using background images.

Background on a web page

Setting a background image to a web page traditionally occurs through the background attribute of the tag. . This pattern is repeated horizontally and vertically, thus filling the entire browser window. It is clear that there are no special options for creativity here, so let’s turn to styles and see what can be done using CSS.

CSS has five attributes that control the background image: its addition, position, and repetition. However, all these parameters are replaced by one universal property, background , which we will use in the future.

Adding a wallpaper

Adding a picture occurs by setting the address of the picture using the url keyword. To control the repetition of an image, the arguments no-repeat, repeat-x (repeat horizontally) and repeat-y (repeat vertically) are used. Thanks to this, you can get the web page shown in Fig. 1.

To set an image to a web page, you need to add a background style property to the BODY selector, as shown in Example 1.

Example 1: Background image

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 fitting tightly to the edges of the browser, it is shifted 30 pixels to the right and 20 pixels down from its original position.

Repeating a pattern

Due to the fact that you can set the background pattern 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 (Fig. 2), you will need the image shown in Fig. 3.

The design must be such that it fits together vertically without noticeable seams, and also forms 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 enough to specify 20-40 pixels, and the height of the image depends on the purpose of the document and the expected height of the content of the web page. Do not also forget that a large drawing will increase the size of the graphic file. And this will negatively affect its loading speed and, ultimately, lead to slower background display. For this case, a picture of 30x200 pixels was quite suitable (Fig. 5).

Example 3 shows the HTML code to create a gradient background.

Example 3: Repeating the background horizontally

A gradient design goes well with a solid color block, so in this example we add a layer to display the content of the web page.

Adding a picture to text

By using a background image, you can automate the process of adding graphics to specific text, such as headings. To do this, use the background universal property, which is applied to the desired selector. The value is the path to the picture and, so that it does not repeat, the no-repeat argument (example 4).

Example 4: Adding a picture

Heading

Main text

As shown in this example, the drawing can be moved horizontally and vertically from its original position, by default this is the upper left corner of the block element. Background shift allows you to position the image in relation to the text in the desired way. To prevent the text from overlapping the image, you must 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 space between the image and the text.

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 the background color, but this is 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 method will do.

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

For the image I will use a small html language icon:

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 the keyword url after the colon, and then indicate the path to the file in parentheses. 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 why 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 here, since these are the basic capabilities of working 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 is worth using now if you want to use a seamless texture on your website as a background. Today the gradient can already be implemented using css3 methods, we will definitely talk about this later.

Background position

By default, the background image, unless it is set to repeat, will be in the upper left corner of its 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 is on the server and at the 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 An empty space will appear, 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 is a good technique to use, but now you will be faced with 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 cut off, but at the same time, if the background image is properly selected, this will not affect the appearance of 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 a 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 rgba color setting format.

As I said earlier, there are many formats for setting colors in CSS. One of them is rgb, a fairly 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.

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!

12/27/14 55.8K

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?

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

I will also show you an excellent foreign service for selecting 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 paste this code into a text file and save it with the .html extension. 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, you need to go to the page with the picture, right-click on the picture and click on “Copy picture 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. 🙂