How To Set The Background

Table of contents:

How To Set The Background
How To Set The Background

Video: How To Set The Background

Video: How To Set The Background
Video: How To Change Desktop Background Windows 10 2024, May
Anonim

In order to embellish your website on the Internet, you can make changes to its design. Changing the design implies any action, from changing the background of the main page to completely redrawing the site template. If you decide to change the background of your site, then the following instructions will help in solving this issue.

How to set the background
How to set the background

Necessary

Editing the css file

Instructions

Step 1

For the most part, the site design code is located in the style.css file. But each template can be different from the previous one, so the design code can be located in a different file, but also with the css extension. In order to set the background color of your site, you must enter or replace the existing value with the following expression: / * white background * / body {

background-color: #FFFFFF;} / * white title background, black font color * / h1 {

color: # 000000;

background-color: #FFFFFF;

}

Step 2

In order to insert any image as a background on your site, you must enter or replace the existing value with the following expression: body {

background-color: # 000000;

background-image: url ("Image-1.jpg");

}

It should be noted that in this case it is necessary to provide a link to the image file, which will be located in the same folder with the css file.

Step 3

If you want to tile a small picture or a small picture, then use the background-repeat command. In order to use this command correctly, there are several refinements to this command:

background-repeat: repeat-x - repeat the image along the x axis;

background-repeat: repeat-y - repeat the image along the y axis;

background-repeat: repeat - repeat a picture along two axes at once;

background-repeat: no-repeat - the image is not repeated;

background-attachment: scroll - scrolling the picture together with the page;

background-attachment: fixed - the image is not scrolled.

Using the syntax of this command, you can show how it works in examples:

background-position: 30px 40px - The image is 30 pixels down from the top and 40 pixels from the left to the right.

background-position: 60% 35% - Left padding is 60% and top padding is 25%.

Recommended: