Help with css background image position

[johriley]

Hi

I am struggling with some css background positioning. I am new to css but I am trying to understand the principles. Anyway here is the problem....

I am trying to display a left image, then a repeating image in the middlem then an image on the the right. These images are displayed as background images.

Ontop of this background I am trying to display a text box.

Iv'e tried loads of combinations, just wondering whak is the best way to achieve this.

I have tried the following...

css code
#box_login_wrapper {
width:200px;
height:125px;
}

#box_login_email {
top:10;
left:10;
}

#box_login_left {
background-image:url('/images/dogwalkerheaderleft.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width:27px;
height:125px;
}

#box_login_middle {
background-image:url('/images/dogwalkingheaderrepeat.png');
background-repeat: repeat-x;
background-position: 27px 0px;
width:146px;
height:125px;
margin:27px;
}

#box_login_right {
background-image:url('/images/dogwalkerheaderright.png');
background-repeat: no-repeat;
width:27px;
height:125px;
margin:146px;
}





page code
<div id="box_login_wrapper">
<div id="box_login_left">
<div id="box_login_middle">
<div id="box_login_right">

<div id="box_login_email">
<?php
** this just displays the input b
echo display_inputbox('LoginEmail',$fieldarray);
?>
</div>
</div>
</div>
</div>

</div>

[codeparrot]

Hello johriley,

Try the following lines of code in CSS:



#box_login_wrapper {
width:200px;
height:125px
}

.box_login_left {
background:url(../images/dogwalkerheaderleft.png) 0 0 no-repeat;
width:27px;
height:125px;
float:left;
}

.box_login_middle {
background:url(../images/dogwalkingheaderrepeat.png) 27px 0 repeat-x;
width:146px;
height:125px;
float:left;
}

.box_login_right {
background:url(../images/dogwalkerheaderright.png) 0 0 no-repeat;
width:27px;
height:125px;
float:right;
}


HTML Code:


<div id="box_login_wrapper">
<div class="box_login_left"></div>
<div class="box_login_middle"></div>
<div class="box_login_right"></div>
</div>


Let me know if that works! G'luck :)