The HTML markup language allows a web designer to use any image as a background image. However, the language itself lacks built-in controls for background images. More fine tuning is done using cascading CSS style sheets.
Instructions
Step 1
To make the background stretch to the full width of the browser, you need to use the z-index parameter in your CSS. It allows you to set the order of the elements you create. The higher the value of this attribute, the higher the block will be located on the page.
Step 2
Create new documents in html and css format (right mouse button - "New" - "Text file") and open them using any text editor.
Step 3
Place the background image on the bottom layer. It will stretch depending on the screen resolution. At the top, another element will be located on which the page content will be displayed. To do this, create two blocks. In the css file write:.1layer {z-index: 1; width: 100% height: 100% position: absolute;}. 2layer {Position: absolute; z-index: 2; } The position: absolute parameter allows you to specify absolute positioning, i.e. the layer will be positioned independently of other elements.
Step 4
Include the generated CSS code in the HTML file using the link tag: Page background
Step 5
Create a new layer. Using the tag
place a picture on it. For example: Page content For img, only the width parameter is set, because if you specify additionally height, in some browsers, image distortion will appear.
Step 6
Save your changes. To test your code, enlarge the page in your browser window. The background image should also be enlarged.
