SitePoint Sponsor

User Tag List

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

    Background position - under png

    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:
    HTML Code:
    <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

    Code:
    #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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    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


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
  •