How can I add a background image to a web page?

+4 votes
asked Jul 9 by Jay Roland (60 points)

2 Answers

+1 vote

You can add some CSS to your 'body' tag like this:

<body style="background-image: url("image.jpg")">

Or prefferably if you have an external CSS file linked to your HTML web page, you can add this to it:

body
{
   background-image: url("image.jpg");
}

'image.jpg' is just a dummy file name which you should replace with your own file name. Also, if your file is inside a folder i.e. 'images' then the url should be "images/image.jpg" assuming your html file is in the same folder as your 'images' folder. Also, remember to keep all filenames, folder names and html tags in lowercase letters. 

answered Jul 9 by Lovecode (640 points)
0 votes

There is also this way:

<body background="image.jpg"

i.e. using a background attribute, but I think that it might not be supported by HTML5...

answered Jul 10 by Lady Coder (140 points)
That's right, you should not be using the background attribute with HTML5, it is not supported. The CSS way is supported by HTML5 and using an external CSS file for styling an HTML document is a better practice anyway.
Lovecode logo
...