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 its file format must be .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". If possible choose a .jpg image file.

 

 

2. Download it and save it in your website's local folder. If you have not already done so, it's best to create a folder called "media" to organise website images in.

 

 

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

 

 

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

<body>

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

<div id="container">

 

 

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

#body-background-image {
position: fixed;
width: 100%;
height: 100%;
background-image: url(media/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. Open your web page in a browser to test it.