Frustrating Issue

Get Started
1

Hello everyone, I joined these forums because I saw how helpful alot of it’s members where when i google’d several questions and I got linked here.

Alas, I cannot find the answer to the following question:

I have a background image that I believe requires to be in an <img> tag because it is set as an ID in my css that stretches it to conture to everyones screen resolution, however I also have an image I made in photoshop that I need placed on top of it as a DIV because It is the “body” to my site, Here is my css

#background{
	position:absolute;
	z-index:0;
	width:100%;
	height:100%;
	top:0;
	left:0;
}

#bodybackground{
	background: url(img/body.png) no-repeat center;
	margin:auto;
	padding:10px;
	width:1000px;
	height:900px;
	background-position:top;
	z-indez:1;
}

I need my body img to be ontop of the <img> tag I have set, Unless someone knows of a more practical way to have my background image stretch other then having the css for an <img> tag, in such a way that I can place my body img over it.

2

Maybe you should look at something like Supersized2. It gives you a nice fullsized background (with the option of a slideshow) while other elements site happily on top.

3

(srry bout the double post)

Thanks Kalon, that did solve my issue, however I still need the body image to be centered vertically and horizontally on every screen as well.

4

That would help :stuck_out_tongue: but sadly no

Here’s what I have…

<!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>Youth Sticking Together</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<img src="/img/bg.png" id="background"  />
<div id="bodybackground">

</div>

</body>
</html>


@charset "utf-8";
/* CSS Document */

body,html{
	background: #000;
	color:#000;
}

#background{
	position:absolute;
	z-index:0;
	width:100&#37;;
	height:100%;
	top:0;
	left:0;
}

#bodybackground{
	background: url(img/body.png) no-repeat center;
	margin:auto;
	padding:10px;
	width:1000px;
	height:900px;
	background-position:top;
	z-index:1;
}

I want the #bodybackground (defined in a div tag)
to float over top of the #background (defined in the <img> tag)

5

Without seeing your html as well, I’m not exactly sure what you are after.

But this demo will stretch your backround image to fill the entire brower window regardless of its size and the “body image” is placed on top of the background image.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
html, body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 100%}
 
#wrapper {
position: relative;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 100%}
 
#bground {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%}
 
#bodyPic {
position: absolute;
top: 100px;
left: 100px;
width: 30%}
 
</style>
</head>
<body>
 
<div id="wrapper">
          <img id="bground" src="pic1.jpg" alt="" />
          <img id="bodyPic" src="pic2.jpg" alt="" />
</div>
 
</body>
</html>
6

z-indexes should work. Without looking at the details, just check first if this spelling mistake (in red) is causing your problem:

#bodybackground{
	background: url(img/body.png) no-repeat center;
	margin:auto;
	padding:10px;
	width:1000px;
	height:900px;
	background-position:top;
	[COLOR="Red"]z-inde[B]z[/B]:1;[/COLOR]
}