How To Add A Background To The Site

Table of contents:

How To Add A Background To The Site
How To Add A Background To The Site

Video: How To Add A Background To The Site

Video: How To Add A Background To The Site
Video: HTML & CSS for Beginners Part 13: Background Images 2024, November
Anonim

The background in the source code of web pages, depending on the design used, can be set either by specifying a color, or by linking to an image file with the addition of its positioning parameters. This can be done directly in HTML tags, in a separate CSS block in the header of the source, or in a separate file with style descriptions.

How to add a background to the site
How to add a background to the site

Instructions

Step 1

Open the source code of the block that is used on your site to set the background of its pages. When using any control system, this block, as a rule, is allocated in a separate file. The control system itself has tools for editing it directly in the browser. Depending on the specific system, this procedure can be organized in different ways - for example, through the page editor. If you do not use control systems, then the corresponding file must be downloaded to your computer and opened in any editor. It is better to use a specialized HTML editor, but you can also use the simplest Notepad.

Step 2

Add a bgcolor attribute to the body tag indicating the color shade if the background of the page should be a color, not a picture. For example:

Here is a dark orange color as the background. Not every textual ("mnemonic") name of the shade can be recognized by the browser, so it is better to use a hexadecimal color code. For example, the code FF8C00 corresponds to a dark orange color:

Step 3

Use the background attribute instead of bgcolor on the body tag if the background should be set by an image rather than a color. For example, if the file with the background image is called bgPic

Step 4

Place a style description in the header of the source code if you want to set the background of the page using CSS. For example, a CSS style description that replaces the dark orange color specified in the body tag as the background might look like this:

body {background-color: DarkOrange;}

And you can set a background image with the following style description:

body {background: # FF8C00 url (images / bgPic.gif) repeat-y;}

Here, in addition to the link to the picture, the background color is also indicated (# FF8C00) - if there are places on the page that are not covered by the background image, they will be painted in the color shade specified here. The repeat-y parameter specifies the repeat of the background image vertically (along the Y axis). If you need to repeat the image horizontally, then you should use the repeat-x value, and to prohibit the repetition of the pattern - no-repeat. You can place a description of styles before the tag that closes the heading part of the HTML code.

Step 5

Save the changes made in the page editor, or save and upload the downloaded file back to the server if the code was edited in a file on your computer.

Recommended: