Center Background Image within div

HTML & CSS
1

Hey chaps…i had this problem before, sorted it out, and now well, ive made changes and got myself into a right mess…

Ive got a trans png file that is 139 x 124. The loaded background thumb is 15 x 15 (just as a test). When i preview the image is also at top left, rather than centered

Structure

<div class="eventwrap2">

<div class="eventwrap">
<div class="picholder2" style="background:url(<?php echo $row_Recordset1['thumb']; ?>) no-repeat;">
  <img src="sitefiles/boxpng.png" width="139" height="124" alt="Bologni Associati: <?php echo $row_Recordset1['title']; ?>" />  </div>
</div>

relevant css


  .eventwrap2{
	float:left;
	width:139px;
	height:auto;
	position:relative;
	padding-right: 7px;
	padding-bottom: 0px;
	margin-bottom: 10px;
}
 .eventwrap{
	width:139px;
	height:124px;
	position:relative;
}
.picholder2 {

	background-repeat: no-repeat;
	background-position: center center;

		
}

thanks in advance for your slaps to the nape of my neck…

2

Hi,

This:


style="[B]background[/B]:url

“background” is a shorthand property for all the background properties and for every property you omit to mention it reverts to its default and overrides any previous properties define that carry the same weight.

Therefore the default position for a background image is top left and not centered.

use:


style="[B]background-image[/B]:url

This will ensure that only the image is changed and not any other background settings that you have.

3

Nice catch, Paul – I couldn’t figure that one out.

Louis

4

Nice catch, Paul

Thanks :slight_smile: