background image plus overlay on top, how can i get my main overlay image to work over a background image Options

[brooklyneast05]

I have a background image already in, i want to put an overlay image over my layout, so there's the background image showing up on the sides behind my overlay image. i can't seem to figure out how to do this though. here's my code

About me

CODE

<style type="text/css">

.ftd {Moves the entire profile up - hey hey hey goodbye}
body table {margin-top:-5000px;}

.ftd {Keeps the ad, search form, and navigation links in place}
body td table, body div table {margin-top: 0;}

.ftd {Makes the table the ad, search form and nav links are on transparent}
table, tr, td {background-color:transparent;}

.ftd {Removes the search form}
body div table form{display:none;}

.ftd {For comment boxes to display}
body table div form{display:block;}

.ftd {Hides the dividers in between the nav links}
div table td font {visibility:hidden; }

.navbar {visibility:visible !important;}

a.navbar:active, a.navbar:visited, a.navbar:link { font-family: arial; font-size: 10px; font-weight: bold; color:7E0808; }
a.navbar:hover { color:ffffff; text-decoration: strike; }



.mainimage{
background-image: url('http://i6.photobucket.com/albums/y242/brooklyneast05/Myspace/differentlayout.png');
background-attachment: absolute;
position: top center;
overflow: none;
margin-left: -400px;
margin-top: 100px;
padding-top: 0px;
padding-bottom: 0px;
}

body {
background-color: 660000;
background-image: url("http://i6.photobucket.com/albums/y242/brooklyneast05/Myspace/Myspace_v2_by_wireless_studios.jpg");
background-repeat: repeat y;
background-attachment: scroll;
background-position: top left
}


.layout{
background-image: url('http://i6.photobucket.com/albums/y242/brooklyneast05/Myspace/differentlayout.png');
background-attachment: fixed;
position: top center;
overflow: none;
margin-left: 400px;
margin-top: -499px;
padding-top: 0px;
padding-bottom: 0px;
}


.bottom {
background-color:transparent;
border: 0px solid white;
position:absolute;
left:50%;
margin-left:-25px;
top:900px;
height:100px;
width:50px;
z-index:1;
}


.links {
background-color: transparent;
border: 2px;
border-style: double;
border-color: transparent;
font-family: arial;
font-size: 11px;
color: ffffff;
position: absolute;
top: 0%;
left: 50%;
margin-left: 105px;
top: 415px;
height: 130px;
width: 272px;
overflow-y: auto;
overflow-x: auto;
z-index: 2;
}

.div1 {
background-color: transparent;
border: 4px;
border-style: double;
border-color: transparent;
font-family: arial;
position: absolute;
top: 0%;
left: 50%;
margin-left: -373px;
top: 202px;
height: 374px;
width: 286px;
overflow-y: auto;
overflow-x: hidden;
z-index: 2;
color: ffffff;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}

.div2 {
background-color: transparent;
border: 4px;
border-style: double;
border-color: transparent;
font-family: arial;
position: absolute;
top: 0%;
left: 50%;
margin-left: -373px;
top: 594px;
height: 162px;
width: 286px;
overflow-y: auto;
overflow-x: hidden;
z-index: 2;
color: ffffff;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}

.div3 {
background-color: transparent;
border: 4px;
border-style: double;
border-color: transparent;
font-family: arial;
position: absolute;
top: 0%;
left: 50%;
margin-left: 115px;
top: 203px;
height: 199px;
width: 250px;
overflow-y: auto;
overflow-x: hidden;
z-index: 2;
color: ffffff;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}

.div4 {
background-color: transparent;
border: 4px;
border-style: double;
border-color: transparent;
font-family: arial;
position: absolute;
top: 0%;
left: 50%;
margin-left: 115px;
top: 548px;
height: 204px;
width: 250px;
overflow-y: auto;
overflow-x: hidden;
z-index: 2;
color: ffffff;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}





a.lalalalink:link, a.lalalalink:active, a.lalalalink:visited {
font-family: arial;
font-weight: bold;
font-size: 10px;
color: 7E0808;
width: 260px;
line-height: 18px;
background-color: 969789;
margin: 0 0 3px 0;
padding: 0 4px 0 0;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: 2pt;
}
a.lalalalink:hover {
color: 999589;
font-weight: bold;
font-family: arial;
font-size: 10px;
letter-spacing: 2pt;
width: 260px;
line-height: 18x;
background-color: 000000;
padding: 0 0 0 4px;
display: block;
text-align: center;
}



.blacktext10 {
width: 500px;
margin: 0 0 -20px 0;
font-family: arial;
font-weight: normal;
font-size: 12px;
letter-spacing: 2pt;
color: 7E0808;
border-top-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-color: transparent;
border-style: solid;
display: block;
text-align: right;
}

.comt {
font-family: arial;
font-size: 10px;
color: ffffff;
width:650px;
height:700px;
overflow-y: auto;
overflow-x: hidden;
background-color:transparent;
border: 0px;
border-style: inset;
border-color: ;
position:absolute;
top:787px;
left:75%;
margin-left:-600px;
}

.blacktext10 {
width: 500px;
margin: 0 0 -20px 0;
font-family: arial;
font-weight: normal;
font-size: 12px;
letter-spacing: 2pt;
color: ffffff;
border-top-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-right-width: 0px;
border-color: 4c4c4c;
border-style: solid;
display: block;
text-align: right;
}
.comt td b{
width: 635px;
font-family: arial;
font-weight: bold;
font-size: 10px;
display: block;
text-align: center;
}

.comt td a{visibility:auto;}

.bbzherp {style of: comment text;}
.comt td td td, .comt td td td b {
font-size:11px !important;
font-family:arial !important;
color:7E0808 !important;
}
.comt a {
font-weight: bold;
font-family: arial;
color: 7E0808;
font-size: 10px;
text-decoration: none;
}
.comt a:hover {
font-family: arial;
color: 999589;
font-weight: normal;
font-size: 11px;
text-decoration: none;
}
.redtext, .redbtext {
font-family: arial;
font-size: 16px;
font-weight: normal;
font-color: ffffff;
}

.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; _padding:9px!important;} .comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;} .comt td td td b{top:0px; display:;} .comt td td td table, .comt .orangetext15, .redlink, .comt .btext, .rid, .frnd{display:none;} .comt td b, .blacktext10 {display:block;} .comt {z-index:7;}
.comt table, .comt b {position:relative; top:-29px; _top:-29px;}





</style>

I'd like to Meet

CODE

<div class-"layout"><img src="http://i6.photobucket.com/albums/y242/brooklyneast05/Myspace/differentlayout.png"></div>

<div class="div1">Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...</div>
<div class="div2">NAME: Name Here<br>
AGE: Age Here<br>
HEIGHT: Height Here<br>
WEIGHT: Weight Here<br>
HAIR: Hair Color Here<br>
EYES: Eye Color Here<br>
ETHNICITY: Ethnicity Here<br>
LOCATION: Location Here<br>
RELIGION: Religion Here<br>
FAVORITE FOOD: Favorite food<br>
FAVORITE DRINK: Favorite Drink<br>
FAVORITE STORE: Favorite Store<br>
FAVORITE SPORT: Favorite Sport</div>


<div class="div3"><marquee direction=left>
<img src="http://i73.photobucket.com/albums/i210/rachaell_d/samplepic1.jpg"><img src="http://i73.photobucket.com/albums/i210/rachaell_d/samplepic1.jpg"><img src="http://i73.photobucket.com/albums/i210/rachaell_d/samplepic1.jpg"><img src="http://i73.photobucket.com/albums/i210/rachaell_d/samplepic1.jpg"><img src="http://i73.photobucket.com/albums/i210/rachaell_d/samplepic1.jpg"><img src="http://i73.photobucket.com/albums/i210/rachaell_d/samplepic1.jpg"><img src="http://i73.photobucket.com/albums/i210/rachaell_d/samplepic1.jpg"><img src="http://i73.photobucket.com/albums/i210/rachaell_d/samplepic1.jpg">
</marquee></div>

<div class="div4">s, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah..s, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah..s, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah..s, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah..s, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah..s, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah..s, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah...Put whatever you want here pics, vids, words..whatever, this box with scroll...Blah, blah blah blah blah blah blah..</div>



<div class="links">
<center>
<a class="lalalalink"href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=YOURFRIENDID
">Message</a>

<a class="lalalalink" href=" http://collect.myspace.com/index.cfm?fusea...ID=YOURFRIENDID
">Add</a>

<a class="lalalalink" href=" http://collect.myspace.com/index.cfm?fusea...ID=YOURFRIENDID
">Block</a>

<a class="lalalalink"href=" http://viewmorepics.myspace.com/index.cfm?...ID=YOURFRIENDID
">View Pics</a>

<a class="lalalalink"href=" http://home.myspace.com/index.cfm?fuseacti...ID=YOURFRIENDID
">View Friends</a>

<a class="lalalalink"href="http://www.skem9.com/~55453">Layout By...</a>
</div>



<div class="commentbox">
<center>

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="YOURFRIENDID" type="hidden"> <textarea name="f_comments" class="Skem9box"></textarea><br /><input type="submit" value="Add Comment." class="Skem9sub"></form>
</center>
</div>
<div class="blog">
<img src="http://i6.photobucket.com/albums/y242/brooklyneast05/Myspace/Myspace_v2_by_wireless_studios.jpg" border="0"/></div>

<div class="bottom"></div>
<div class="comt"><table class="center"><tr><td><table>

here's the link to my profile
http://profile.myspace.com/index.cfm?fusea...iendid=54673599

there's wood paneling background, and i want to put this image as my overlay

http://i6.photobucket.com/albums/y242/broo...erentlayout.png


i'd REALLY appreciate any suggestions of how to code that in. i can't get the two images to not cancel eachother out
thanks

[freeflow]

CODE

body{
background-image: url(URLTOIMAGE);
}

You should be using a code similiar to that in style tags for your about me.

CODE

.image{
position: absolute;
left: #px;
top: #px;
width: #px;
height: #px;
z-index: #;
}

Put that between style tags and edit the positions.

CODE

<div class="image"> <img src="URLTOIMAGE"></div>

Put that anywhere and add in the overlay image url.


If you don't understand divs read http://www.createblog.com/forums/index.php?showtopic=142922 .

[brooklyneast05]

i got the overlay to work
the problem is
when it looks centered to me, its not to other people on my page
my screen is wider i guess then other peoples computers
im on a macbook
anyone know anything to do about this?


http://profile.myspace.com/index.cfm?fusea...iendid=54673599

on my screen, that is centered

[freeflow]

Position it like this instead:
position: absolute;
left: 50%;
top: 0%;
margin-left: #px;
margin-top: #px;
width: #px;
height: #px;
z-index: #;

[brooklyneast05]

i did, the problem is then all the stuff doesn't line up on top of the overlay
so i thought, then i would need to go in and all of the boxes with information would also need to be changed to percentages...but do i change them all to the same percentage?

[freeflow]

Leave the percentages alone. Just edit the #'s . Each div should have a diff margin left and a diff margin top. The percentages stay the same. Each div should also have a diff. z-index.