Positioning background image adding padding

Question

I d like to add a background to a div  position right center  but   have some padding to the image   The div has padding for the text  so I want to indent the background a little   probably makes most sense w  example   http   jsbin com umuvud edit javascript html live  Thanks

User · Answer

this is actually pretty easily done  You re almost there  doing what you ve done with background-position  right center   What is actually needed in this case is something very much like that  Let s convert these to percentages  We know that center 50   so that s easy enough  Now  in order to get the padding you wanted  you need to position the background like so  background-position  99  50     The second  and more effective way of going about this  is to use the same background-position idea  and just use background-position  400px  width of parent  50    Of course  this method requires a static width  but will give you the same thing every time   Method 1  99  50   Method 2  400px 50

User · Answer

In case anyone else needs to add padding to something with background-image and background-size  contain or cover  I used the following which is a nice way of doing it  You can replace the border-width with 10  or 2vw or whatever you like    bg-image       background  url   image logo png   no-repeat center  ffffff   contain      border  inset 10px transparent      box-sizing  border-box      This means you don t have to define a width

User · Answer

To add space before background image  one could define the  width  of element which is using  background-image  object  And then to define a pixel value in  background-position  property to create space from left side   For example  I d a scenario where I got a navigation menu which had a bullet before link item and the bullet graphic were changeable if corrosponding link turns into an active state  Further  the active link also had a background-color to show  and this background-color had approximate 15px padding both on left and right side of link item  so on left  it includes bullet icon of link too    While padding-right fulfill the purpose to have background-color stretched upto 15px more on right of link text  The padding-left only added to space between link text and bullet   So I took the width of background-color object from PSD design  for ex  82px  and added that to li element  in a class created to show active state  and then I set background-position value to 20px  Which resulted in bullet icon shifted inside from the left edge  And its provided me desired output of having left padding before bullet icon used as background image   Please note  you may need to adjust your padding   margin values accordingly  which may used either for space between link items or for spacing between bullet icon and link text

User · Answer

first off  to be a bit of a henpeck  its best NOT to use just the  lt background gt  tag   rather  use the proper  more specific   lt background-image gt  tag   the only way that i m aware of to do such a thing is to build the padding into the image by extending the matte   since the empty pixels aren t stripped  you have your padding right there   so if you need a 10px border  create 10px of empty pixels all around your image   this is mui simple in Photoshop  Fireworks  GIMP   amp c   i d also recommend trying out the PNG8 format instead of the dying GIF     much better   there may be an alternate solution to your problem if we knew a bit more of how you re using it       it LOOKS like you re trying to add an accordion button   this would be best placed in the HTML because then you can target it with JavaScript PHP  something you cannot do if it s in the background  at least not simply    in such a case  you can style the heck out of the image you currently have in CSS by using the following    hello img   padding  10px      WR

User · Answer

Updated Answer  It s been commented multiple times that this is not the correct answer to this question  and I agree   Back when this answer was written  IE 9 was still new  about 8 months old  and many developers including myself needed a solution for  lt   IE 9   IE 9 is when IE started supporting background-origin   However  it s been over six and a half years  so here s the updated solution which I highly recommend over using an actual border  In case  lt  IE 9 support is needed   My original answer can be found below the demo snippet   It uses an opaque border to simulate padding for background images   x000D   x000D   hello     padding-right  10px    background-color green    background  url  https   placehold it 15 5C5 FFF   no-repeat scroll right center  e8e8e8    background-origin  content-box    x000D   lt p id  hello  gt I want the background icon to have padding to it too I want the background icon twant the background icon to have padding to it too I want the background icon to have padding to it too I want the background icon to have padding to it too  lt  p gt  x000D   x000D   x000D   Original Answer  you can fake it with a 10px border of the same color as the background  http   jsbin com eparad edit javascript html live  hello      border  10px solid  e8e8e8     background-color  green     background  url  quot http   www costascuisine com images buttons collapseIcon gif quot                  no-repeat scroll right center  e8e8e8

User · Answer

you can use background-origin padding-box  and then add some padding where you want  for example   logo  background-image  url your image jpg   background-origin padding-box  padding-left  15    This way you attach the image to the div padding box that contains it so you can position it wherever you want

User · Answer

There is actually a native solution to this  using the four-values to background-position   CssClass  background-position  right 10px top 20px    This means 10px from right and 20px from top  you can also use three values the fourth value will be count as 0

[css] Positioning background image, adding padding

Examples related to css

Examples related to background-image