Question

I’m very new to web development, I have a code like this :

<style type="text/css">
    span {
        background:red;
        background: transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
    }
</style>
 <span>
    Contents. 
 </span>

I get the output but the image is been placed over Contents text. I tried with :

 background-position: 25px;

But that is making the image to disappear! But what I was looking for is :

Contents . . . . . . . . . . . . . my_image

(note that . in above is space)

Where I’m making the mistake?

Thanks in advance.

Answer 1

Remember that <span> is an inline element, which is not the correct markup to use for items that you wish to display in a block manner. For that, you should use a <div>. That being said, you can use text-indent: 25px; to move your text to the right. Alternatively, you can move the new <div> to the right using left: 25px;. Remember that left will tell it how far from the left border you wish to place it. Then, you can place the text in another <div>:

<style type="text/css">
div {
    display:inline-block;
}
div.image {
    background:red;
    background:transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
    left:25px;
}
</style>
<div class="box">
  Contents.
  <div class="image"></div> 
</div>