Background not showing, hiding by DIV

Question

dwain-pipe

14 Years Ago

I've been banging my head all day with this (probably very simple) problem, and it's driving me mad. Wondering if please you could help me....

The HTML and CSS has lots more in but I've stripped out all the unneeded code to just get to the problem.

So the CSS (css folder and called style2.css) is...

body {
	background-color: #3b3b39;
} 
#container {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#page {
	background-image: url('../images/background.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	height: auto;
}

The HTML is...

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="css/style2.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
	<div id="page">
	</div>
</div>
</body>
</html>

With the above the background.jpg doesn't show at all. Not in any browser.

I read something about empty DIVs not displaying background images, so I tried...

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="css/style2.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
	<div id="page">
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
	</div>
</div>
</body>
</html>

And the background image was shown, but only the part of the image that was under the 's, however I can't have those 's there so I must be missing something but I've no idea what.

The next part of the code (that I've removed from the about code) is...

<div class="clear" id="content">
	<h1>Heading blah, blah</h1>
</div>

With the CSS...

#content {
	width: 800px;
	margin-left: 100px;
	float: left;
	padding: 10px;
}

and also...

.clear {
	clear: both;
}

I've put this content DIV part here because when I include it in the page, the page goes haywire again, not showing the background at all.

I'm very confused, so any advice greatly appreciated.

html-css web-design

5 Contributors
16 Replies
262 Views
5 Days Discussion Span
Latest Post 14 Years Ago Latest Post by teedoff

teedoff 3 Posting Pro

14 Years Ago

Where exactly are you wanting the background image to show? Behind the page itself? or behind the content of your page? If you want it behind you page, the try putting the image in your body style rule.

macgurl70 9 Junior Poster

14 Years Ago

Have you tried putting the background image in the #container div? It reads that you are placing all the items inside that div anyhow. This would also put the image behind all of the other content you are bringing into that div.

floatingDivs 21 Junior Poster

14 Years Ago

Set the height of #page equal to the height of the image and it should work.

macgurl70 9 Junior Poster

14 Years Ago

Is this background supposed to fill the page, where it looks like it is in or is the body of the page? There is nothing wrong having it in the body statement, especially if that works for you on this project.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dwain-pipe · Answer 1 · 2010-08-22T16:48:01+00:00

The background image has a 1000px width (and 736px height) and should be behind all the text, content and other images on the page.

It does work when I add <body background="images/background.jpg"> etc, but I thought that was very 'old school' and adding backgrounds via CSS was the best way. The CSS method works fine on other sites I've made, it's just this one that it's not working one.

dwain-pipe · Answer 2 · 2010-08-23T15:25:38+00:00

I've now tried both of these suggestions, neither worked. :-(

Putting the background-image code in the content DIV changed nothing.

Putting the correct height px in the page or the content DIV also did not make the image appear.

This is so frustrating.

dwain-pipe · Answer 3 · 2010-08-24T15:44:52+00:00

Yes the background is to fill the page behind the text, but top centred. I'll try the body statement approach.

teedoff 3 Posting Pro · Answer 4 · 2010-08-24T18:48:45+00:00

It does work when I add <body background="images/background.jpg"> etc, but I thought that was very 'old school' and adding backgrounds via CSS was the best way. The CSS method works fine on other sites I've made, it's just this one that it's not working one.

Adding background images to the body via CSS isn't old school. That should work, provided you don't set a color to any element layered on top of the body.

dwain-pipe · Answer 5 · 2010-08-24T20:54:45+00:00

Maybe a misunderstanding here.

I was suggesting...

BODY statement background - old school
Background via CSS - new school

The only colour element I have is...
body {
background-color: #3b3b39;
}

It doesn't matter where I put the...

background-image: url('../images/background.jpg');
	background-repeat: no-repeat;
	background-position: center top;

in the page, content or container DIVs in the CSS, the background is not displaying. As I said in a previous post...

the background image (has only) shown, but only the part of the image that was under the 's, however I can't have those 's there so I must be missing something but I've no idea what.

teedoff 3 Posting Pro · Answer 6 · 2010-08-24T21:02:21+00:00

I might be wrong but if you set the body background to a color and then want the background of the body to be an image, the two might not work together? Unless of course your image is small with a transparency and your using a repeat attribute to repeat the image on a Y or an X axis. Have you tried removing the background color and just set background-image to your image?

dwain-pipe · Answer 7 · 2010-08-25T05:59:33+00:00

The background image is smaller than the whole page hence I have to set the background colour. It's not the background colour that is stopping the background image showing, rather it's something to do with the DIV having no content in it. When I add a number of into the DIV the image starts to show.

teedoff 3 Posting Pro · Answer 8 · 2010-08-25T22:23:39+00:00

Have you added something besides to the div? Add some dummy text or something. I dont know why the image wouldnt show if you have it in the body style with a repeat. I would still disable the background color just as a process of elimination and see if the image shows up.

sithembisophp 0 Newbie Poster · Answer 9 · 2010-08-26T15:05:55+00:00

I tried this: background-image: url('../images/background.jpg'); and it did not work.

I then tried this: background-image: url('images/background.jpg'); and it worked.

Hope this helps :-)

teedoff 3 Posting Pro · Answer 10 · 2010-08-26T19:59:41+00:00

background-image: url('../images/background.jpg');
background-image: url('images/background.jpg');

That simply means that your image may be one file up the tree or more than one. I assume, dwain-pipe, that you have gotten it to work, as you said, with the so your path shouldn't be an issue.

dwain-pipe · Answer 11 · 2010-08-27T21:07:10+00:00

Thank you all so much for your suggestions. I've got it to work :-)

I had the height set to auto in the page DIV. I've now set it to the height of the background image and it works.

I've put the call for the background image in the page DIV, not the content or container DIVs.

Again thank you everyone, very much appreciated.

teedoff 3 Posting Pro · Answer 12 · 2010-08-27T21:46:05+00:00

lol doesn't seem like we did much..You figured it out on your own. Glad to hear you got it working!