Web page background image tutorial

Adding a background image to the body tag of a web page

You can add an image that fills the whole of the browser window. The image must be 1500px (W) x 1000px (H) and .png, .gif or .jpg

1. Create (eg take a photo), or download a copyright free image that is as close to 1500px (W) x 1000px (H) as possible.

You can search in Google for "royalty free images". Choose a .jpg image file.

2. Download it and save it in your website folder.

3. Now you need to optimise it so it's the right size and file format ..


4. Add this div tag to each of the site's html pages between the opening <body> tag and opening <container> tag ..


<div id="body-background-image"></div>

<div id="container">

5. Add these CSS styles to your style sheet ("styles.css") ..

#body-background-image {
position: fixed;
width: 100%;
height: 100%;
background-image: url(image-name-here.jpg);
background-size: cover;
background-position: center center;
z-index: 1;
margin: 0px;
padding: 0px;

body {
font-family: "arial", sans-serif;
margin: 0px;
padding: 0px;

6. Test in a browser.