Member Avatar for dwain-pipe

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 <br />'s, however I can't have those <br />'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.

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.

Member Avatar for dwain-pipe

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.

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.

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

Member Avatar for dwain-pipe

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.

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.

Member Avatar for dwain-pipe

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

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.

Member Avatar for dwain-pipe

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 <br />'s, however I can't have those <br />'s there so I must be missing something but I've no idea what.

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?

Member Avatar for dwain-pipe

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 <br /> into the DIV the image starts to show.

Have you added something besides <br /> 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.

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 :-)

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 <br /> so your path shouldn't be an issue.

Member Avatar for dwain-pipe

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.

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

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.