CSS Help - Adjusting Background Image

[TheBigK]

Howdy,

So I applied my limited CSS knowledge to implementing a welcome notice on our board. Take a look at it here -> http://www.crazyengineers.com/community/ .

The image (finger) is touching the right border of the notice box and I've no clue how to shift it to left by say about 10 pixels. Here's my code : -

<xen:if is="!{$visitor.user_id}">
<div class="intro">
<p> CrazyEngineers (CE) is a global online community of engineering students and professionals just like you. You can ask questions or share ideas with over <b>137,000</b> registered engineers from over 180 countries. Registration is 100% free and takes < 40 seconds to complete. </p>
</div>
</xen:if>

CSS -

.intro {
display: block;
background: #FCFFF4;
background-image: url("http://www.crazyengineers.com/wp-content/uploads/2012/09/smooth.png");
background-repeat: no-repeat;
background-position: right;
border: 1px solid @primaryLighter;
border-radius:10px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
padding: 10px;
}
 
.intro p {
font: 11pt Verdana, Helvetica, Ariel, sans-serief;
padding-right: 150px;
text-align:justify;
}

I'd even appreciate better way of writing above code

 

[dtmcl]

.intro {
display: block;
background: #FCFFF4;
background-image: url("http://www.crazyengineers.com/wp-content/uploads/2012/09/smooth.png");
background-repeat: no-repeat;
background-position: 580px;
border: 1px solid @primaryLighter;
border-radius:10px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
padding: 10px;
}
.intro p {
font: 11pt Verdana,Helvetica,Ariel,sans-serief;
padding-right: 170px;
text-align: justify;
}

That works

 

[TheBigK]

Thank you, sire! That worked