Content box background image not showing in browser

J

jastice

New Member
Hey there,

I'm completely new to CSS and HTML and therefore I'm sure it's a very simple coding fault. But the fact is that I can't seem to fix it. I have checked google for hours trying to find the solution, but the only answers that were given were about file paths. And now that's something that's correct for sure. The image is there when I look at the design tab in Dreamweaver, but whenever I look at it in the browser version it's gone.

I'll give the html and css codes to show you what I've done (wrong):

CSS:
.content {
height: 862px;
width: 695px;
margin-right: auto;
margin-left: auto;
background-image: url(images/Content%20copy.png);
background-repeat: no-repeat;
margin-bottom: 10px;
clear: both;
}

HTML:
<div class="content" id="container">
<div class="content_thumb">
</div>
<div class="content_desc">
</div>
<div class="content_footer">
</div>
<div class="content_footer">
</div>
</div>

Thanks in advance,

Jastice
 
PixelPusher

PixelPusher

Super Moderator
Staff member
The divs are all empty. Add some text or something into them, and I bet you will see the image then. Not a good idea to style with empty tags.

Try This:
HTML: 
<div class="content" id="container">
    <div class="content_thumb">&nbsp;</div>
    <div class="content_desc">Some Text Bla Bla</div>
    <div class="content_footer"></div>
</div>

One other thing...I would refrain from using "%" symbols in your image names. That could also cause issues.
 
J

jastice

New Member
PixelPusher said:
The divs are all empty. Add some text or something into them, and I bet you will see the image then. Not a good idea to style with empty tags.

Try This:
HTML: 
<div class="content" id="container">
    <div class="content_thumb">&nbsp;</div>
    <div class="content_desc">Some Text Bla Bla</div>
    <div class="content_footer"></div>
</div>

One other thing...I would refrain from using "%" symbols in your image names. That could also cause issues.
Click to expand...

I've done both, and it's still not showing in either IE or Mozilla..
And about the '%' in the name, the file name was 'Content_copy.png'. I guess dreamweaver was too lazy to display the full name.

Is there something like the content layer hiding behind the background or something like that? I'm sorry if it sounds really really retarded...

Thanks for the help though
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Hmmmm.....do you have it hosted so I can see the actual page? what version of IE and FF are you using?
 
J

jastice

New Member
Ehm no it's not online, it's still just index.html on my local drive, nothing more.
But I'll post a picture of what it looks like in Dreamweaver and what it looks like in IE and FF:

Dreamweaver:


FF:



IE:




It's really getting on my nerves :D
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
This is a tough one...i can see how it is bugging you :) Maybe try just adding the image as an image tag (just to get it to display). Then go back to adding it to the background of a single div (with no divs inside). Then work your way back to what you have written in this post. Sometimes going through it in small steps helps???

just for hell of it try this:

HTML: 
CSS:
.content {
height: 862px;
width: 695px;
margin:0px auto 10px auto;
background: url(images/Content_20copy.png) top left no-repeat;
}
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Do you use the developer tool bar in IE? or FireBug in FF? (F12)

They help because you can point and choose a section of your page to see what styles it has, hence helping you find errors. They are free plugins for both browsers.
 
J

jastice

New Member
It does show in my browser when I add it as a normal image, but then ofc the text table gets kicked all the way down. And the code you provided doesn't work, and when I alter it to something that my dreamweaver does recognize there's no image....
 
J

jastice

New Member
Oh nevermind my bad, I'm not using a table. It just looked like a table:rolleyes:
But here's the HTML for the whole page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JasticeDesigns</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"><!--BEGIN CONTAINER-->

<div id="head_wrap"><!--BEGIN HEAD WRAP-->

<div id="logo"><!--BEGIN LOGO-->
<img src="images/Logo copy.png" width="342" height="48" />
</div><!--END LOGO-->

<div id="navigation"><!--BEGIN NAVIGATION-->
<ul class="nav_links">
<li><a href="#"><strong>Home</strong></a></li>
<li><strong><a href="#">About</a></strong></li>
<li><strong><a href="#">Projects</a></strong></li>
<li><strong><a href="#">Contact</a></strong></li>
</ul>
</div><!--END NAVIGATION-->

</div><!--END HEAD WRAP-->

<div class="content" id="container">
<img src="images/Content.png" width="862" height="695" />
<div class="content_thumb">&nbsp;
</div>
<div class="content_desc">Some text blablabla
</div>
<div class="content_footer">
</div>
<div class="content_footer">
</div>
</div>
</body>
</html>
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Well looking at the code you just provided...
you have two instances of the id "container". An ID can only be used once.

The very top (first div, first "container") doesn't seem to be needed and its NOT closed.
The fact that you are duplicating an id and also not closing the DIV could very likely be causing your problem. Try deleting that first DIV.

And if you are setting the background image in the style "content" then you should not need the IMG tag in the DIV (<div class="content" id="container">...)


Hopefully this solves it for you :p
 
J

jastice

New Member
Hmmm thanks for the help but it's still not there..
and about the IMG tag, it was the temporary html code with the IMG tag you suggested in order to see if it would show up as an inserted image, which it didn't.

I guess I'll just start it all over again and hope it'll work out

Thanks again
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Yeah I don't know of anything else??? the code looks good otherwise. Have you tried using either of the developer toolbars i suggested? that might help see an error when you test from within DW.

Sad to say but rebuilding might be a good idea, rather than bashing head in the table trying to figure out the problem.
 
You must log in or register to reply here.
Top