Search code examples
csspositioningbackground-image

CSS - Positioning BG Image from Overlapping Text

I want to position the 16x16 icons below differently. I want to auto-position them on the right of the text, and not behind the text. Also, I'd like to move the icons slightly up a few pixels too.

This is the result of my code below:

bgimage position stafu

<span class="ico_person">John Smith</span>
<span class="ico_phone">1-555-555-5555</span>
<span class="ico_email">[email protected]</span>

Here's one the styles:

<style>
.ico_person {
  color:#067CEA;
cursor:pointer;
font-weight:bold;
background-color:#F6F6F6;

background-image:url("/images/icons/icon_admins.png");
background-repeat:no-repeat;
background-position:1px 5px;
padding: 3px;
border-radius:3px 0 3px 3px;
border: 1px solid #CCCCCC;

}
</style>

If the image is a background, am I able to position it exactly where I need it? Or does background-image stop that within certain boundaries?

Solution

  • You are able to set the horizontal and vertical position of a background using background-position. For example if you want the background 10px from left and 20 from top you write:

    background-position:10px 20px;