Hi, sorry i cant get my head around…im sure ive done it before…
I have the #eventphotoholder to position the divs, .eventphoto has a background image and .eventphotopng places a png over the image. Its works fine, however the image has a width of 712, whereas the png div has a width of 784px. How is it possible to add padding/positioning to the background image?
Structure:
<div id="eventphotoholder">
<div class="eventphoto" style="background: url(sitefiles/test2.jpg) no-repeat; width: 712px; height: 315px; z-index:50;">
<div class="eventphotopng"></div>
<div class="toptester"><h3>test text </h3></div>
</div>
</div>
…and the css
#eventphotoholder{
float: right;
height: 342px;
width: 784px;
position: relative;
}
.eventphoto{
height: 315px;
width: 784px;
}
.eventphotopng{
height: 342px;
width: 784px;
background-image: url(../sitefiles/toppoto.png);
background-repeat: no-repeat;
}
.toptester{
position: absolute;
height: auto;
width: auto;
left: 50px;
top: 210px;
color: #FFFFFF;
}
Thanks in advance