1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Help - Adjusting Background Image

Discussion in 'Styling and Customization Questions' started by TheBigK, Sep 16, 2012.

  1. TheBigK

    TheBigK Well-Known Member

    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 : -

    HTML:
    <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 -

    HTML:
    .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 :)
     
  2. ShadyX

    ShadyX Well-Known Member

    Code:
    .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 :)
     
    Jake Bunce and TheBigK like this.
  3. TheBigK

    TheBigK Well-Known Member

    Thank you, sire! That worked :)
     
    ShadyX likes this.

Share This Page