Almost every popular site has a nice look and feel. In website design, an important part is the background, which is also called background, which each of us can create or change. In this article I will tell you how to put a background on the site.

Making a new background for sites

To complete the task, you can use one of 4 methods:

• 1. Background with one color
• 2. Background with texture
• 3. Background with a gradient
• 4. Background from a large image

How to create a background with a single 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 to 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 event that 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, just change the value after the colon and enjoy your work.

Creating a background with a texture

This method is especially popular recently, 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 that, you should write the following code:

background-color: # 537759;

background-image: url (images / pattern.png);

This code contains the familiar parameter for maintaining the color (it's green) and an element that is responsible for connecting the green texture.

How to make the 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 1 megapixel gradient (see the picture below), save it as an image and upload it to the hosting. After that, you can write the necessary code, namely:

background-color: # 83C5E9;

background-image: url (images / gradient.jpg);

background-repeat: repeat-x;

In this set, in turn, there is a function that is responsible for the background color that we use for reassurance. After that, the parameter that is responsible for connecting the gradient, and finally, the function that is responsible for repeating the gradient along the X axis.

Using a big picture for the background of the site

This method is the second most popular, as it allows you to use different pictures to create the background. To implement this method, you just need to upload a large image to the folder with the site's pictures and write the following code:

background-color: # 000000;

background-image: url (images / image name.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 highlighted. The third function allows you to pin the image to the center of the site, and the last parameter blocks its repetition throughout the page structure.

Change the background on ucoz sites

Those methods of creating a background for a site can be used on different site management systems, but not on sites - ucoz. In order to change the background for the ucoz site, 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 that, you need to copy the link, paste it into the Internet browser and you will get access to the picture that was in the background.

To use a new background, you just need to load it into the File Manager. At the same time, make sure that the name of the new picture for the background is the same as before the change. Save your work and go to the site to view the work done.

Change the background for the site to HTML

If you want to make the background on the html site using an image, then just 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!

Trepachev D.P. 2012-2020

Students: I have vacations until January 6, I will answer whenever possible during vacations,
sometimes I can disappear for a couple of days

Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Basic tutorial HTML reference CSS reference OOP and MVC tutorial Video tutorials Basic tutorial Reference Video tutorials Basic tutorial Basic tutorial Basic tutorial Admin tutorial Developer tutorial AJAX + PHP tutorial

Background-attachment property

Property background-attachment sets how to scroll the background image of the element: along with the text or text will slide over the image.

Syntax

Selector (background-attachment: fixed | scroll | local;)

The values

Default value: scroll.

An example. Scroll value

Now property background-attachment set to scroll... Scroll vertically - you will see how the text scrolls along with the background:

body (background-attachment: scroll; background-image: url ("bg.png");) #elem (width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20px;)

An example. Scroll value

And now the property background-attachment set to fixed... Scroll vertically to see the text slide over the background:

body (background-attachment: fixed; background-image: url ("bg.png");) #elem (width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20px;)

By default, when you scroll a web page with a background, the background scrolls along with other elements. Sometimes this is appropriate, and sometimes you want the background-image to always be visible. There is a background-attachment property to manage this state.

Background-attachment values

The property can take three values ​​to customize the background behavior:

• scroll (default) - The background image moves with other elements when the web page is scrolled.
• fixed - the value fixes the background image, making it insensitive to scrolling. As you scroll down the page, the background in the background will remain stationary.
• local - this value was added due to the fact that in the case of local scrolling, the background with the value scroll Behave like fixed... When the value local the background scrolls with the element's content, and does not scroll unless the content scrolls (but scrolls with the element itself).

For a better understanding of how the property works, take a look at the examples below. So that you can compare them, your all three background-attachment values ​​(hopefully you're using a modern desktop browser when learning CSS!).

background-attachment: scroll

background-attachment: fixed

background-attachment: local

Browser support

Desktop browsers IE9 +, Edge 12+, Firefox 25+, Chrome (all versions), Safari 5+, Opera 11.5+ have full support for all values ​​of the background-attachment property. From mobile browsers Opera Mobile, Firefox for Android, IE Mobile and QQ Browser understand all the meanings. In other browsers, support is either partial or absent.

Further down the tutorial: background-origin and background-clip properties for positioning background images and controlling cropping.

This little lesson will be about how to make a beautiful fixed background on your website (or on a one-page page) that will smoothly flow from one image to another when the user scrolls the page. CSS has a background-attachment: fixed property that allows the background image to be fixed. That is, when scrolling the page, it will not scroll with the page. But there is no CSS property to make the images change when scrolling, so we'll use Javascript.

Fixed background for the site

Perhaps you do not understand what I am writing about, so watch the demo and you yourself will see this beautiful effect:

Download

How to make a changing background for a website?

Html

We'll start by defining the HTML structure of the page for which we are doing this effect:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id = "cbp-fbscroller" class = "cbp-fbscroller">

In the tag