Putting a background image on a website is a five-minute affair. Much more time is spent on preparing an image - selection, adjustment, adding effects, composing several illustrations into one graphic file.
Instructions
Step 1
The background attribute is responsible for managing the background. To evenly fill the page with a single color, use the style tag in the body:. The background will be black. If using CSS, put in your head: body {background-color: # 000000;}
Step 2
With the help of a link, a repeating image is set. The address is specified as an external or internal link. When using this method, it is important that the seams between the images remain invisible, otherwise the page will look sloppy. In CSS, use: body {background-color: # 000000; background-image: url (images / pattern.png);}.
Step 3
The repetition of the pattern can be controlled. Background-repeat is responsible for this function along with the following elements: - repeat-x - horizontal repetition; - repeat-y - vertical repetition: - repeat - repetition in both directions; - no-repeat - without repetition. It is set like this: body {background-color: # 000000; background-image: url ("butterfly.gif"); background-repeat: no-repeat; }
Step 4
The background-position helps to position the image in the desired part of the web page. Coordinates can be set using percentage (50% 75%), centimeters (5cm 5cm), pixel aspect (200px 400px), word form (left, right, top, center, bottom). For example: body {background-color: # 000000; background-image: url ("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: left bottom; } The value 0% 0% is equal to top left.
Step 5
The background-attachment property specifies whether the images are scrolled along with the page (background-attachment: scroll) or not (background-attachment: fixed).
