Image as background.

+2 Joseph Shannon · July 15, 2014
Doing buckys html/css tutorials, Im stuck on the adding an image as your background.  This is what I have...

<!doctype html>
<html>
<head>
<style type="text/css">
body {
background-image:url (bears.jpg);
}
</style>
</head>

<body>

</body>

</html>


For whatever reason, I'm just getting a white background.  The picture is in the same folder as this html save file, so in theory, it should work...right?  what am I doing wrong here?

Post a Reply

Replies

Oldest  Newest  Rating
+1 Alan Johnson · July 16, 2014
Remove the whitespace after url
+1 Tyler Watkins · July 16, 2014
You should try removing the white space after url and try putting single quotes around the image name.

Source: http://www.w3schools.com/cssref/pr_background-image.asp
+2 Joseph Shannon · July 18, 2014
Thanks guys,  you were right, it was the white space.  I can't believe I was stuck so hard on something so simple!
+1 Kaveh Greenwood · August 7, 2014
It happens a lot, haha.
0 Colin James · August 8, 2014
Off topic:
- DTD is not needed. (HTML5 spec)
- type attribute is not needed (HTML5 spec)
- please use indentation (readability)
- use single quotes when using paths in CSS (specification)

If you're wondering why I'm saying this it's because I know so many front-end devs that can create a hell of a UI but their coding style is just awful.

Code should be: 

<html>
<head>
<style>
body {
    background-image: url('bears.png');
}
</style>
</head>

<body>

</body>
</html>


Good luck with future HTML, CSS etc.
+1 Shamal Sandeep · August 9, 2014
Quote the url and remove the space after the URL. it will be good if you specify repeat. It will make your render great!

And one last tip. If you're using a texture layout for background like BuckysRoom please use a small image and put a repeat on x & y both axis. It will make the site load much faster!
  • 1

HTML / CSS / Web Design

107,052 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators