Today you’re going to learn how to add a background image to your page using HTML5. In previous versions of HTML, you could use the background attribute of the body element:
<html> <body background="https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg"> <h1>Welcome to our site!</h1> </body> </html>
However, in HTML5, the background attribute is not supported. Instead, you must use CSS to define a background image for the body tag. Here’s the code for adding the background-image with inline CSS:
<!DOCTYPE html> <html> <body style="background-image:url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg);"> <h1>Welcome to our site!</h1> </body> </html>
Now that works, but it definitely is not optimal. If you use inline CSS, you’ll have to add the styling to every page, and making changes would be time consuming. This is where the magic of CSS comes in. You can use a linked CSS file and then making changes will be much easier.
Here’s the same page with a custom HTML5 background but using a linked CSS file rather than inline CSS:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <h1>Welcome to our site!</h1> </body> </html>
And here’s the main.css file that is linked to from index.html:
body {
background-image:url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg);
}
Background Image Repeat
If you are using a pattern background image on the html or body, your page probably looks correct. In this case we are using a photo as the background image, so we need to make the background image not repeat. If you click here and have a big enough screen, you’ll see that our image repeats which is not what we want.
To fix this we’ll make a few changes to our main.css file:
body {
background:url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg) no-repeat center center fixed;
}
First, we changed background-image to background to consolidate the code. Then we added no-repeat center center and fixed. This positions the image in the center of our page.
Using CSS3 For A More Responsive Background Image
Now that you have your background image working on your HTML5 page, you probably are running into issues with white space on the background and sizing issues when you check your page on a mobile device.
Your first thought may be to use a background color to fill the space, and while that’s not a bad idea to have while your background image loads, that still doesn’t solve your issue. To make the image cover the page regardless of the user’s window size, we’ll use CSS3. Here’s the code:
html {
background: url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg) no-repeat center center fixed;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
This will make the background image cover the page and it centers it vertically and horizontally. We’ve also changed the element we’ve selected from body to html because the html element’s height and width are controlled by the browser window.
Conclusion
If you’d like to learn more about HTML5, check out our other HTML5 tutorials. If you have any questions about this tutorial or comments in general, post them below in the comments section. Thanks!
