How To Make A Background Image On A Website

Table of contents:

How To Make A Background Image On A Website
How To Make A Background Image On A Website

Video: How To Make A Background Image On A Website

Video: How To Make A Background Image On A Website
Video: HTML & CSS for Beginners Part 13: Background Images 2024, December
Anonim

You can learn the basics of site building on your own; there is enough information on this topic on the Internet and books. However, at the initial stage, difficulties often arise in the use of one or another tag. Indeed, the most common components are best remembered as they are essential when writing any website.

How to make a background image on a website
How to make a background image on a website

Instructions

Step 1

Select the picture you want to use as your background image. If you intend to insert text over the illustration, then in this case it is advisable to limit yourself to options without excessive variegation, in which several colors of similar nature are used. In principle, to eliminate ripples, you can create a "background" for the content - and the problem will be successfully solved.

Step 2

Correct the image using Adobe Photoshop. When you're done, choose the Save For Web command from the File menu and select the folder you want. If this is the first image to be used for the site, then an "Images" folder is automatically created.

Step 3

In the tag, write the background = "path to image" attribute. Record example: or. At the same time, keep in mind that the tag should appear only once in the code, it should not be multiplied.

Step 4

Save changes in notepad, click the "Refresh" button in the browser. The wallpaper will appear on the screen. If the dimensions of the image are less than the parameters of the web page, then the image will be duplicated as many times as necessary to fill the entire space. There are two ways to correct this deficiency:

• using the Adobe Photoshop program, set the required picture parameters in pixels ("Image" - "Image size");

• set the required dimensions in the html-code.

For example, if the width is 1250 px, and the height is 650 px, then you need to add the necessary attributes for the table cell in which the picture will be placed.

You cannot set the size in the tag - the image will always be displayed in full size.

Step 5

Analogue of ccs for inserting a background image:

background-image

BODY {

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

}

The "background-image: url (images / bg.jpg)" attribute is the path to the background image.

Recommended: