17.10.2015

Not yet

Hi all!
We continue to learn the basics of HTML.
In this lesson I will tell and show with examples how to make background from a color or image in an HTML page.
Everything is pretty simple!
Let's start with color!
I think you didn’t miss where I talked about how to change the color of text and at the end of the article I gave codes for various colors and shades. Why did I remind you of this lesson? Yes, because there is a table with ready-made color codes, take them and practice right away in this lesson.
So, how to make a color background in HTML...

Color background in HTML

The background color in an HTML document is white by default. How to set the color as desired?
The "bgcolor" attribute will help us with this. To paint over the background, write this attribute to the tag " body»:

Either like this:

Here is the complete HTML code:

The page text will be green and the background black.

The result will be like this:

If you want to make a background from a picture, then add the “background” attribute to the “body” tag:

Fill in any picture where your web page is located (for example, my page has the name "fon" with the extension ".gif"):

Here is the complete HTML code:

The result will be like this:

If the background image is located in the images folder or some other folder, it will look like this:

Here is the complete HTML code:

Page text on a beautiful background.

That's all for today! I think the lesson was not difficult and you understood everything. If you have any questions, write in the comments.
I look forward to seeing you in the next lessons.

Previous post
Next post

From the author: welcome to webformyself and today I want to tell you how to change the background of the site. The background color or image in the background can play a huge role in how a site feels, so you need to know how to set it.

how to change background in wordpress

Again, if you have a wordpress engine, then changing the general background of the page is not difficult. You just need to click the "Customize" button in the "Appearance" tab. Here you need to select "Colors". Depending on the chosen template, it may be possible to choose colors for various elements. But you can choose the color of the page in any case - a convenient color panel will open in front of you.

The number of settings here depends on what template you have. In any case, it definitely should be possible to set the color for the entire page, in different templates you can also set the background and color for headings, links, etc.

Actually, that's all you need to know. If you need to download exactly the background image, select the appropriate item and find the desired file on your computer.

JavaScript. Fast start

In a good way, the picture should not be too heavy, because it will hit the site loading speed very hard. It is ideal to use so-called seamless background images that repeat horizontally and vertically and thus fill the entire space.

After uploading the image, you will be presented with a couple of useful options for customization. The beauty of wordpress is that you see changes immediately, depending on which settings you choose.

First, you will be prompted to choose a repeat method. There are already 4 options: repeat only horizontally, only vertically, on both sides and do not repeat. Depending on which image you are using, you must make a choice.

Repetition can significantly save on the size of the picture when it is small and can be repeated, so that sharp transitions between repetitions are not visible. In this way, you can save tens of kilobytes compared to the method in which a full-fledged large image is loaded.

Position. There is nothing to explain here, just see how the appearance of the page changes with different background positions. Choose the option that you like best.

Binding. This is a very interesting setting, it allows you to choose whether to scroll the background image along with the content or freeze it in one place. Personally, I always like to choose the fixed option, because only content blocks move when scrolling down.

For example, if you have a background image height of 1000 pixels, you do not repeat it and do not fix it, then when you scroll down, it will simply disappear from view. Fixing the background allows the picture to always remain in sight. Sometimes this is a very effective solution.

JavaScript. Fast start

Learn the basics of JavaScript with a practical example of building a web application

Actually, that's all for changing the background in wordpress. As you can see, everything is as simple as possible.

How to change website background in html

Well, we have analyzed a purely visual version, in which you do not need to go into the code and write something there. Now let's figure out how to still change the background through html and css. What are the benefits? You can set background images not only for the site in general, but also for each element separately. For example, for some widget, menu, header, etc. This gives much more opportunities in the design of the site and change its design.

In order to access all of this styling, you need to find your template's main style sheet. Usually it is located in the root, or in the css folder, and is called style.css or main.css.

In it you will see the code that designs the various elements of your site. If you want to set the background globally, this can be done by assigning a background to the body selector, that is, the body of the page.

How is the background set?

Remember - the background property. Today it is better to use the abbreviated version of this property. For example:

body( background: #ccc url(bg.png) no-repeat 50% 50% fixed; )

body ( background : #ccc url(bg.png) no-repeat 50% 50% fixed;

What does all of this mean? The first parameter is usually a solid color. Let's say we set grey. The color can be omitted if a background image is specified. As you can see, the image is specified using the url(path to the file) construct. Accordingly, you need to correctly write down the path to the file, and be sure to specify its extension.

All the parameters that I wrote down after that are optional and are optional. So, I specified that the background image should not be repeated, positioned in the center both horizontally and vertically, and also fixed in one place so as not to disappear when scrolling.

As you can see, here are all the same parameters that you set up visually, but here they are registered as the values ​​of the background property.

In this example, I used the abbreviated notation of the property, it's just more convenient, but in fact, each individual parameter has its own property: background-color for color, background-image for the image, background-position for setting the position.

Of course, in order to become fluent in these properties, I advise you to take our course first, and if you want to become an advanced user in relation to the css language, then . There you will learn how to set several backgrounds at the same time, adjust their repetition, use gradients, etc. The information is very interesting and useful for site builders.

Well, I told you about the basics of working with the background. Subscribe to our portal to receive news and learn more about site building.

JavaScript. Fast start

Learn the basics of JavaScript with a practical example of building a web application

61.5K

Any room will look much better with an expensive Persian rug on the floor. So what's wrong with your site? Maybe it's time to “cover” its floor with an expensive elegant handmade carpet. Let's take a closer look at how to make a background for the site:

Background for the site

It happens that the old site design is already boring. And I want something new and tasty. And the new design will be such if you cook it yourself.

But changing the entire design of the resource on your own is a thankless thing. And not everyone has their hands properly “sharpened” for this business. Therefore, it's easiest to refresh an old template by changing the resource's background color or background image.

There are several ways to change the background on a website. For this, the possibilities of CSS or html are used. But many of the background properties have the same name and usage in these web technologies.

HTML background basics

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 register it inside the tag . For example:

Website Background #55D52B

In addition to the hexadecimal color code, a keyword or RGB value 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.

In html, only 16 color keywords are supported. 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's better to use hex or RGB.

In addition to color selection, other customization options are available. Setting the background-color property to transparent makes the background of the page transparent. This value is assigned to this property by default.

Now let's look at the possibilities of the hypertext language for setting the background image for the site. This can be done with the background-image property.

As you can see from the code, the image is bound via the url path given in parentheses. But not all pictures turn out to be so large that they fill the entire screen area with their size. Let's see how the smaller image will be displayed.

Let's assume that we are developing a site about poetry, and we want to use an image of Pegasus as a background. The winged horse will personify the freedom of the poet's creative thought!

We want the image to be displayed in the middle of the screen once. But, unfortunately, the browser does not understand our lofty desires. And displays a smaller image for the background of the site as many times as the screen area can fit:

Probably, four smiling horses with wings will be too much for poets for inspiration. Therefore, we prohibit the cloning of our Pegasus. We do this with 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 these 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 is better if our flyer is located in the middle of the screen. The background-position property is just for positioning the background image on the page. You can set location coordinates in several ways:

• keyword ( top , bottom , center, left, right);
• Percentage - the countdown starts from the upper left corner;
• In units of measurement (pixels).

Let's use the simplest option for centering:

It happens that you need to fix the position of the picture when scrolling. Therefore, before making an image 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 for such beauty you have to pay in full. The weight of a high quality image can reach several megabytes.

Good day to everyone who wants to learn and learn something new! Have you ever paid attention to the appearance, during the development of which the creators were too lazy to decorate the background of the pages? And I turned. This looks bad. Often, due to the lack of divisions between different types of information that we are used to, it is mixed up and there is simply no desire to look further at such a web resource.

So that such a disaster 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 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. And now let's start!

Basic tools for setting the background of web pages

To set a background image, web language designers provided the background attribute. It is available in both , and css.

In the 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 colored image, or even an animation.

So, to set the background image via the html unit just write this code: ... and instead of the words "file address" insert the path to the picture.

However, notice! If you want to see a one-color canvas as a background, specified by a value from the color palette, then 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 a special code that 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 to study these web languages, then you can peep the color code on the Internet.

Background as a property in cascading style sheets

It is set either in a separate file with css styles, or in an element

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 for a link to my blog, but share it with your friends. I wish you a pleasant learning. Bye bye!

Sincerely, Roman Chueshov

Lesson 7. Text and background color in HTML.

Date: 2008-12-05

How to set the background and text color on a web page?

By default, the color of text and, in general, any font on web pages is always black (#000000 ). But we can always set absolutely any color that we like and looks decent or more suitable for the design of a particular site.

Set the text color

In HTML, the color of text, font, background, and other elements can be set in two ways:

1. Method 1. In pair tags attribute is written with the name of the desired color. The name of the color is indicated in English. For example, the title color on our web page can be set in this way:

Comments on this article (lesson):

Andrey! What a wonderful site you have! I have been using it regularly for the second week now: I have been studying your lessons and video tutorials; I read your literature and download programs; I'm taking my first steps in web programming! And, most importantly, I can do it!!! And I'm not a physicist at all, but a lyricist! And everyone who visits my literary site can be convinced of this: "POEMS BY OLEG GUZ" My details: e-mail: STIH [email protected] website: http://sites.google.com/site/stihiolegguz/

check the code carefully

I've tried changing the background color and it doesn't work! How to change the background color?