views:

41

answers:

3

Hi All,

I have a question regarding image alignment with CSS. For example I have created a css class as below:

.link {
 background: url("images/image1.gif") scroll right;
}

and below is the markup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <p class="link">This is a link</p>
    </head>
    <body>
    </body>
</html>

When I check in the browser I get the image on the text. I want it after the text i mean

This is a link (this is where I want the image to appear)

A: 

shouldn't it be position right not scroll right? You can also give the link text some padding to clear the background picture.

Steve Robillard
"position" is not valid in the [background property](http://www.htmldog.com/reference/cssproperties/background/).
Bryan Downing
it should be background-position or in the shorthand top right.
Steve Robillard
+2  A: 

Try

.link {
  background: url("images/image1.gif") top right no-repeat;
  padding-right: 32px; /* or the width of your image */
}
kibibu
great minds think alike :) hahaah you beat me to it
spirytus
Thanks you guys
A: 

Not sure if I understand right, but assuming you trying to display image right after text ends you might try something like that:

.link {
       background: url("images/image1.gif") scroll right;
       padding-right: 20px; /* adjust to fit nicely with your design */
}

hope it helps :)

spirytus