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

+4 votes
asked Dec 9, 2014 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 Dec 9, 2014 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 Dec 10, 2014 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
...