html - Place background image 1em from the right? -


As far as I can tell, it is not possible to keep CSS background image 1em from the right border of any block, nor It is possible to place an image 1em from the bottom.

The following code places the background image 1em 2em up to the left and 2em from the top. 

  & lt; Div class = "foo" style = "background: url ('bar page') no-repeat 1em 2em" & gt; Here are some text & lt; / Div & gt;

Is there any way in the CSS that the background image should be "off the right edge" if the box size is dynamic and assuming you can not convert the HTML?

(will not work by percentage, because box size can change)

If this is not possible, then what is the smallest amount of HTML you make?

This is the solution that came with me: 

  & lt; Style & gt; Div.background {Float: Correct; Background: url ('bar.png') Any repeat top left; Margin-right: 1am; Width: 16px; Height: 16px; } & Lt; / Style & gt; & Lt; Div class = "foo" & gt; & Lt; Div class = "background" style = "" & gt; & Amp; Nbsp; & Lt; / Div & gt; Here are some text & lt; / Div & gt; Allows you to change the anchor point from top to left, which you need. For example, from the bottom right, the bottom left corner of the 1em image will be set to 2px:  
  background-position: 2px right below 1em;  
 
 Confirmed to work in: 
 
 
 IE9 / 10, Firefox 13+, Chrome 26+, Opera 11+, Seamonkey 2.14+, Lunascape 6.8 .0 
 
 
 According to April 2013, only IE 6-8 and some finger broos are not supported. 
 
 Here is a test page:

Comments

Post a Comment