No matter what I do, the page just ends up completely white. Here is my code:
<!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>Solid Inc.</title>
<style type="text/css">
<!--
body {
background-image: url(Solid-%20Gradient.jpg);
background-repeat: repeat-x;
}
#imagediv {
background-image: url(Solid-%20Text%20Holder.jpg);
background-position:center top;
background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
<div id="imagediv">
</div>
</body>
</html>
I'm using DreamWeaver for this. For some reason, the page only turns white when put it into Live View (a feature of DreamWeaver, just so people who don't have it won't get confused,) but when it's not in Live View, it turns out fine.
I added an attachment that shows what the page turns out like.
Please help!
Full Version: Nothing Turns Up
What I'm trying to do is have one background picture go on top of another background picture with CSS. It can only be CSS because I need the first background picture (the gradient) to repeat in a certain way (unless you know how to do this with HTML,) as you can see in the code. I'm using DreamWeaver for this.
#imagediv has no content and no hight so it collapses. Hence there is no area to show the background image on. Give it a border and you'll only see a hoizontal line.
QUOTE(pandy @ Aug 24 2009, 02:29 PM) 
#imagediv has no content and no hight so it collapses. Hence there is no area to show the background image on. Give it a border and you'll only see a hoizontal line.
But #imagediv is already it's own picture, so why do I need to set a height and width?
How do you mean? In the code you posted it's totally empty. The background image doesn't take up any space. It just covers the space that's already there - which is none.
How much do you see of the blue DIV if you look at this in a browser?
How much do you see of the blue DIV if you look at this in a browser?
HTML
<div style="background: yellow">Blah</div>
<div style="background: blue"></div>
<div style="height: 5em; background: red"></div>
<div style="background: blue"></div>
<div style="height: 5em; background: red"></div>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.