I have been working on something for over six hours, and my brain is fried. I hope someone can help me.
I want a background, that sits behind part of my page. Partially behind content, but mostly to the left of the content. But if someone is using a lower resolution, I want the background to go off screen rather than push itself under the content (and making it unreadable).
I finally got it to work… did some test code (pasted below). However when I put the DTD on it of XHTML strict (or even transitional) the backgrounds disappear. Colours on the divs, backgrounds to the divs… they go. That doesn’t make sense to me as I’ve used background colours before, but I can’t see the forest for the trees now.
Could someone enlighten me? Many thanks in advance.
<!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" xml:lang="en">
<head>
<title>Test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
html {
overflow-y: scroll;
height:100%;
text-align:center;
}
body {
margin: 0px;
padding: 0px;
border: 0px;
min-height:100%;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
text-align:center;
}
.backcontainer {
width:687px;
margin-left:auto;
margin-right:auto;
height:100%;
background-color:#000000;
position:relative;
}
.inside {
background-color:#000000;
background-image: url('http://www.mysite.com/myimage.jpg');
height:100%;
position:relative;
margin-left:1px;
margin-right:1px;
left:-350px;
width:250px;
z-index:6;
}
.inside2 {
background-color:#000000;
height:100%;
left:150px;
width:650px;
z-index:7;
color:#ffffff;
float:right;
top:0px;
position: absolute;
}
</style></head>
<body>
<div class="backcontainer"><div class="inside"><div class="inside2">
Stuff here Stuff here Stuff here Stuff here Stuff here
</div></div></div>
</body></html>