Background position - under png

[barney0o0]

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

[Paul O'B]

Hi,

You can't add padding to a background image but you can of course move the background image around using the background-positionroperty.

e.g.
background-position: 20px 30px;

That would move the image 20px from the left and 30p from the top. Of course this assumes that no-repeat has been set otherwise the image is just repeated from that new position in all directions.

I'm not sure if that is what you are asking though as it sounds too simple and I'm sure you would have thought of that

[barney0o0]

Hey Paul

I try that and it didnt work, then i realised that the dimension of the background image prevented from moving, so i increased the width:

style="background: url(sitefiles/test2.jpg) no-repeat; width: 784px; height: 315px;  background-position: 35px 0px;

..and now it works....i just thought the dimensions were that of the image itself, rather than the bounding box