Why doesn't my background image show up? It only decides to show up when i declare an image height and width, can i please have some help? here is my html code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="default.css" /> </head> <body> <div id="wrapper"> <div id="head"> </div> <div id="nav"> </div> <div id="msg"> </div> <div id="top"> </div> <div id="page"> </div> <div id="brings"> </div> <dv id="foot"> </dv> </div> </body> </html> Code (markup): and here is my css code: body { text-align: center; margin: 0 0 0 0; } #head { background-image: url('images/head.png'); width: 899px; height: 777px; background-repeat: no-repeat; align: center; } Code (markup): Can i have an explanation please, i tried the thing with and without quotes. thanks
Without a declared height and width, it doesn't know how big the background image is. If you don't want to declare a height or width, you will need to insert the image inline.
Move all the contents from the '#head' property to 'body' property and reload. Try clearing your cache.
mjewel and nihangshah are right. This is what happens when a background-image has no coordinate system to attach to - the browser will not show the image. Most of the browsers do this. However, there is one case where you can have a background-image without any dimensioning of the containing element, and that is when it is directly in the body itself. So the browser just needs some guidance as to the container it is going to fit the background-image in. For instance, add a sensible height to the container (#head, in this case), and the image should then appear.
You don't have a background-position so the browser is using the default position, which is center center. Try adding background-position: left top;
Inline as in <img> rather than a div background. It needs height+width so it knows how big it is. It'll just follow the size of the content if there's no height, which in your case is 0px tall, hence why it doesn't display.
Your CSS is invalid so the entire #head declaration is being ignored. See, there is no CSS property 'align'. did you mean 'text-align', or are you trying to center the image (in which case that's background-position as gazu suggested) #head { width:899px; height:777px; background:url(images/head.png) top center no-repeat; } Code (markup): Is that what you are trying to do? NOT that I'd actually code a heading that way, since I'd try for text and a image-replacement technique, but I'd have to see the image you are using to say one way or the other. ... and no, you don't have to use IMG for that if you don't want... I'm not even certain where people are getting the idea that's your issue.
First of all, what you declare is not the dimention of the background pictures and you don't have to declare it . What you declare is the dimention of the #head element . But you have to declare the position of the background pictures . The code are suggested as following . #head { background: url('images/head.png') top left no-repeat; } Good luck .
I doubt if this is why your image is not showing but just a heads up, I was designing a website last week and I ran into the same problem and I couldn't figure out why the background image wasn't showing and I realized that I had a space in the CSS like this : background:url[space](images/image.gif). When I deleted the space, the image appeared. Took me quite a while to figure it out....