SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center Background Image within div

    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
    HTML Code:
    <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
    Code:
      .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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This:
    Code:
    style="background: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:
    Code:
    style="background-image:url
    This will ensure that only the image is changed and not any other background settings that you have.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice catch, Paul -- I couldn't figure that one out.

    Louis

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Nice catch, Paul
    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •