Pic in Div

[pantherseyes]

is this the right way still to code that, and put it in it's own style tags and then a 2nd set of style tags for the look on the rest of the page??

Code:

<style type="text/css">

<!--

.image {

background-image: url(images/imagename.jpg);

background-color: #FFFFFF;

background-repeat: repeat-x;

background-position: right top;

height: 225px;

width: 100%;

}

</style>

[pantherseyes]

forgot this part from what i found, this to be added to it?

Code:

<div class="image"></div>

[B.SkiLLs]

forgot this part from what i found, this to be added to it?

Code:

<div class="image"></div>

yes but that part here is the html part.

Also only need one set' of style tags. With all CSS inbetween it. etc... Also dont forget the z-index part of the css code

[pantherseyes]

i took out the image url in the css part  so it does not repeat twice, however, this does not fall behind the background top div, it goes under it instead.  when i tried it without this code and went with copying the .topdivcontent stuff, (in another topic if you remember)  i had the same problem, is either the size of the pic bad or i need to know the code for positioning it behind the top div pic????  below is just to be the background behind top div.

i put in the bio section (bandpage) this:

Code:

<style>
body {margin-top:520px;}

.TopBanner {width:800px; height:517; text-align:center; position: absolute; left:50%; top:5px; margin-left:-400px; z-index:2; visibility:visible;}

.TopBannerbackgroundimg
 <!--.image {background-image: ;>
background-color: FFFFFF;
background-repeat: no-repeat;
background-position: right top;
height: 225px;
width: 100%;
z-index:1;
.i {display:none}
table.interestsAndDetails {display:none;}
div.myDivL1 {position:relative; top:-15px;}

table, tr, td
{background-color:transparent;
border-style:none;}

body
{background:black;
background-image:url(http://i39.tinypic.com/b50gt5.jpg);
background-repeat:no-repeat;
background-attachment:fixed;}


body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall,
a.searchlinkSmall:link, a.searchlinkSmall:visited
{color:794baa;
font-size:10pt;
font-weight:strong;
font-style:strong;
text-decoration:none;
text-transform:none;
font-family:arial,sans-serif;}

.orangetext15, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext,
.redbtext{color:917dc5;
font-size:10pt;
font-weight:bold;
font-style:normal;
text-decoration:none;
text-transform:uppercase;
font-family:arial,sans-serif}

a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:vis</style>}

[B.SkiLLs]

if i am understanding you.. As said it's the z-index. Set to 1. Is on bottom [behind] then set the others as 2 or 3 or 4 etc... So these ones are like sitting ontop of the others.

Note: remember it's not the contents it's the div layer itself your messing with and working with. The content is just the stuff you put inside the div layer.

[pantherseyes]

yes, you understood me correctly, but that code (css) put the background pic below the - not behind the the div pic-perhaps i should scratch this code as it erased the comments as well.

i don't know why it did that.

monday when im at computer i'll show an image snapshot of the effect and you can see what i saw and it will make more sense.

remember when i show-it's not the final look of page-just getting the feel to how to place things.

[pantherseyes]

here is a screen snapshot of the page, the codes again, that i used this time are as follows:
bio section

Code:

<style> body {margin-top:520px;} .TopBanner {width:800px; height:517; text-align:center; position: absolute; left:50%; top:5px; margin-left:-400px; z-index:2; visibility:visible;} .TopBannerbackground pic {width:800px; height:517; text-align:center; position: absolute; left:50%; top:5px; margin-left:-400px; z-index:1; visibility:visible;} .i {display:none} table.interestsAndDetails {display:none;} div.myDivL1 {position:relative; top:-15px;} table, tr, td {background-color:transparent; border-style:none;} body {background:black; background-image:url(http://i39.tinypic.com/b50gt5.jpg); background-repeat:no-repeat; background-attachment:fixed;} body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited {color:794baa; font-size:10pt; font-weight:strong; font-style:strong; text-decoration:none; text-transform:none; font-family:arial,sans-serif;} .orangetext15, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{color:917dc5; font-size:10pt; font-weight:bold; font-style:normal; text-decoration:none; text-transform:uppercase; font-family:arial,sans-serif} a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:vis </style>

members section:

Code:

<div class="TopBanner"> <img src="http://i30.tinypic.com/33nghnk.jpg/" /> <div class="TopBannerbackgroundpic"> <img src="http://i38.tinypic.com/2wn46ko.jpg" /> </div>

i'll upload file and this is what i mean by it goes underneath the background image, not behind it, i skipped the other codes.

what can i do to fix this?

[pantherseyes]

remember, this is not final, i'm just feeling the placement of things and how to get them where i need them.

[pantherseyes]

I tried adding :top 5px; to the code, and it still stays where it is.

can someone help me?  pretty please??

[B.SkiLLs]

dont do it as a background css pic part. Just do a transparent div and put the picture in it with HTML pic code.

[pantherseyes]

dont do it as a background css pic part. Just do a transparent div and put the picture in it with HTML pic code.

that part that you see is for the rest of the page as normal css with background image and pic and i thought it would be better??  to not have styles stopping and starting, so, i lumped it all together to not do that.  uuhhh..............you mean, the css part i did, do as a div

and problem solved?  i'm lost again.

[pantherseyes]

so, i'm trying this, not sure what to do exactly at this point, but you always said, try and figure it out, so, want to show codes now.
BIO Section:

Code:

<style>
body {margin-top:520px;}

.TopBanner {width:817px; height:577; text-align:center; position: absolute; left:50%; top:5px; margin-left:-400px; z-index:3; visibility:visible;}

.TopBannerbackground pic {width:751px; height:600; text-align:center; position: absolute; left:50%; top:5px; margin-left:-400px; z-index:2; body background:transparent;
visibility:visible;}

.TopBannerbackground1 pic {width:751px; height:600; text-align:center; position: absolute; left:50%; top:5px; margin-left:-400px; z-index:1; body background:transparent;
visibility:visible;}

.i {display:none}
table.interestsAndDetails {display:none;}
div.myDivL1 {position:relative; top:-15px;}

table, tr, td
{background-color:transparent;
border-style:none;}

body
{background:black;
background-image:url();
background-repeat:no-repeat;
background-attachment:fixed;}


body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall,
a.searchlinkSmall:link, a.searchlinkSmall:visited
{color:794baa;
font-size:10pt;
font-weight:strong;
font-style:strong;
text-decoration:none;
text-transform:none;
font-family:arial,sans-serif;}

.orangetext15, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext,
.redbtext{color:917dc5;
font-size:10pt;
font-weight:bold;
font-style:normal;
text-decoration:none;
text-transform:uppercase;
font-family:arial,sans-serif}

a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:vis
</style>

MEMBERS:

Code:

<div class="TopBanner">
<img src="http://i34.tinypic.com/5pipuu.jpg" />

<div class="TopBannerbackgroundpic">
<img src="http://i31.tinypic.com/2ke91l.jpg" />

<div class="TopBannerbackgroundpic1">
<img src=http://i39.tinypic.com/b50gt5.jpg"" />
</div>

I'll send screen shot with writing on it, to explain what i'm trying to do.  then i hope to make sense to you.

[B.SkiLLs]

if it is a body background image you do NOT need css and HTML. Only for divs.

Make the main background page image in the main body CSS code for background then use the div one for the div background only

[pantherseyes]

Hi,

been trying that all along.

i'm not sure what i am missing here, this is why last time i tried adding :top; to it with pixel numbers to move it around, but i'm stuck with the same thing as before i showed.

question have is, do i need to change the top numbers for each div??  can that be the problem i'm having??  it's the only thing that makes sense to me at the moment........

[B.SkiLLs]

cause you have topbanner pic 1 zindex set at 1 so its under.

Also make sure ALL your spots are there like this --->> ; and : and {} etc.... See one missing already on the last font code.