HTML background image. Setting a seamless background in HTML

Hello, friends! I recently did an analysis of my blog in order to find design weaknesses and came to the conclusion that the background looks very poor and does not fit in with the main color scheme of the site as a whole.

This is due to the fact that the background matches the main colors of the template; personally, this irritates me a little, and my eyes are very tired.

In this short article I will tell you how to make and change the background of the site, read carefully until the very end and find out what came of it.

How to make a background for an online website

Before we create the background, you should understand that you should not choose a large image for this, which will only create additional load on the project, as a result of which it will take a long time to load.

I wrote about how to increase the loading speed of a blog in previous articles: “” and “”.

Therefore, it is best to use PATTERN as a background image.

Pattern is a small picture without seams, which, when repeated, forms a large background that fills the entire space of the site.

There are a huge number of ways to make a background (pattern). For example, you can open any search engine and enter the query into the search bar “Download background for the site”, and then spend a long time browsing various sites in the hope of finding a suitable pattern.

But how to make a background with a minimum of effort? I suggest you pay attention to the selection of online services that have hundreds of ready-made backgrounds in their database; all you have to do is edit and customize them to your liking.

1) PatternCooler

One of the largest repositories of a selection of backgrounds. Here you can find a pattern of different textures, change the color parameters yourself, and also choose a popular one from the top.

Look what I was able to choose for myself:

2) Stripegenerator

Also a good online background generator. There is a small number of settings and a rather large database of blanks.

My result:

3) BgPatterns

A very interesting service for creating online backgrounds. You can choose different designs (hearts, stars, circles) and the color scheme of the created background.

Look what I picked for myself:

4) Tartanmaker

For those who want to create a checkered background for themselves, you should visit this online background service.

How to change the background on HTML and PHP sites

If you are working with a site developed exclusively in HTML, then you will need to insert a background in the opening tag ... It should look something like this:

If the main pattern is not loaded, the color specified in bgcolor (FFFFFF) will be loaded instead.

Basically, most beginners and even advanced webmasters use CMS WordPress as a blog engine, so to install a background on the site, you need to upload the pattern created above to your folder with theme images.

To do this, I upload a picture (pattern) to the hosting, the folder is located at this address:

/httpdocs/wp-content/themes/Prosumer/images

background: #FFFFFF url(images/fon-1.png) repeat;

Basic settings:

• — repeat - the image will be repeated both vertically and horizontally;
• — repeat-x - repeat horizontally only;
• — repeat-y - repeat vertically only;
• — no-repeat – ban on repetition.

Try, experiment, because this is the only way you can create or change the background that will best harmonize with the site design.

Watch the video “How to change the background on a website” and you should not have any questions.

Welcome to my blog. Let's continue learning the basics of html. 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 will not 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.

A much better option if you don't want to use css is to 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 being 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 picture, but open the picture 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 a text document and the browser simply will not 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 by Evgeniy Popov . 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 entire 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 a picture from a 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

With css 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, increasing earnings from any blog, and give a lot of useful tips on simplifying your work. See you again and good luck in your endeavors.

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.

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.

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: Horizontal background repeat

A gradient design goes well with a single-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, to prevent it from being repeated, 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.

26.11.2016 04.02.2018

This lesson will tell you how how to remove the background from a photograph and insert a new one in Photoshop. I will describe a fairly simple, correct and fast way to replace an image.

Often in a photo we are not satisfied with the background we are in and there is a temptation to insert something interesting. This can be done simply using Photoshop. Main background replacement needs to be done efficiently and carefully so that the new background fits harmoniously into the photo. Therefore, you need to carefully select the background that you want to insert so that it fits into the composition as best as possible and is similar in color, so that you don’t have to do a lot of color correction later.

Lesson plan

• Open in Photoshop the photo on which the background will be replaced and open the photo of the new background
• Cut out the old background from the photo
• Copy new background and paste into photo
• Adjust colors, levels

Look at the result of the work after replacing the background. Before and after photo.

Preparation for execution

If you want to practice on these same photos, download them:

You can also use your own photos or find others on the Internet.

Step 1

Open the photos in Photoshop. Go to the photo on which we will replace the background.

Step 2

Create a copy of the layer.

Since the photo layer is locked from editing by default, you need to make a copy of it. Select the layer and click CTRL+J on the keyboard to make a copy. You can hide the old layer by clicking on the eye icon.

Let the old layer be a reserve just in case, so that in case of an error you can return to it.

Step 3

Now we need to select people, namely the loving couple in the photo.

We will use the tool Quick selection.

The principle of its operation is simple. You use a brush to show where to select and Photoshop creates the selection.

Start highlighting people. For convenience, you can zoom in (hold ALT on your keyboard and scroll with your mouse wheel).

If you have a more complex photo and cannot highlight it, then apply all the knowledge from.

Advice: To make the selection of objects more even, you need to change the brush size as you work.

In the end, you should completely highlight a couple.

Step 4

Now we get rid of the old background. To do this, invert the selection you made by clicking SHIFT+CTRL+I(or menu Select - Invert). After this, everything around people or the background will be selected. Click Del (Delete) on the keyboard to remove the background.

Now the people appear on a transparent background.

Step 5

Insert a new background. Open an image with a new background. Select the entire area of ​​the image, you can click CTRL+A and copy by clicking CTRL+C.

Go to the photo.

Create a new layer under the photo. SHIFT+CTRL+N or simply click on the create layer icon.

Now that the new layer is created, click CTRL+V to insert a new background image.

The background image is inserted, but it may be too large in relation to the photo.

So click CTRL+T to adjust the scale and reduce the image to the desired size.

The end result will be something like this:

Step 6

Everything is fine, but we need to slightly adjust the color depth of the people, so to speak, to adjust it a little to the new background.

To do this, select the layer with people and click CTRL+L to call the function Levels.

Darken the image a little.

Now the photo with the new background looks more realistic:

This completes our manipulations of inserting a new background. As you can see, there is nothing complicated about this and Photoshop will help you do it in 5-10 minutes with hard work.

If you have any problems, ask questions in the comments, we will help in each individual case.

In html, the background for the site is not specified; this is written using CSS styles, but this is only a theoretical formality. Now let's find out how to determine this background.

Background for a website or a separate block

Since we need a css file to achieve this goal, we need to create it and connect it to html. This is written about in. After this you can start working. First, you need to decide what you want to set the background to. If the entire page as a whole, then you can do it like this:

Body( background-color: white; )

That is, we access the body tag, which represents our entire page. To set the background color, use the background-color property. But what if you need to set the background to a pattern rather than a solid color? Then you should write it like this:

Body( background-image: url(path to the picture. picture extension) )

For clarity, I propose to look at everything in more detail using an example. For this I will use this image:

For example, background-image: url(comp.png) . In this example, we set a background image named comp (that’s what I called it) in png format, which is located in the same folder as the css file.
In html I will create a custom block with specific dimensions to demonstrate the operation of CSS properties.

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 image so many times to completely fill the block. Sometimes this is necessary, for example, when using seamless patterns, but in our case there should be one picture. Luckily, this can be managed very easily.

Repeat background

If you have an image as a background, then by default it will be repeated horizontally and vertically to fill the entire space of the page. To remove this, use the background-repeat property and its no-repeat value. There are also the following values:

• Repeat-x – repeat only horizontally
• Repeat-y – vertical only

Let's add to the properties of our graphic background:

Background-repeat: no-repeat;

Position

The background-position property determines the location where the image will be placed. Two values ​​are specified here – horizontally and vertically. Examples: background-position: right bottom – position in the lower right corner, top-left – in the lower upper corner (and so by default), 250px 500px – offset from the upper left corner to the right by 250 pixels and down by 500.

Let's take 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 so that its edges could be seen.

background-position: 50% 50%;

The image appeared exactly centered in its block. Yes, yes, this is also possible thanks to the percentage recording of the position.

background-position: 70% 20%;

The background is shifted by 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 into a block.

Lock the background

I also really like one property called background-attachment . It has only two values ​​and the first one is the default (scroll). This means that as you scroll the page, the background will also scroll, and if you use an image without repetition, it will eventually run out and will just be a solid color.

To prevent this from happening, background-attachment: fixed is specified and now our background is securely fixed in place. This can be compared to how to define a fixed position for a block so that it does not disappear from the page when it is scrolled.

An abbreviated version of all this goodness

We have discussed many properties that allow you to create a background, but if you use them all, you end up with a cumbersome recording. There is a very elegant solution. The background property allows you to write the necessary settings separated by a space in this order:
Background: color image repeat pin 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).

Lots of backgrounds

What if you need several background images? It happens, what can you do? Today CSS supports this feature. Let's try it too. Let's take this icon

I called it laptop.

And here is the code to insert the multiphone:

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 enter 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 more pictures as you like, but don’t overdo it - too many graphics are not very good.

This is where I would like to end this article. You can do many other interesting things with the background, I will try to write about them in the future (and I have already written something - for example,).