asked on

How to align picture to the right

Hi!

Have the included picture of a login system.
I am using this line, to get the images shown in the textboxes at the picture.

My question is:

How to align pictures to the right

My css-ref:
background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat;
LOGIN.png

Jagadishwor Dulal

Try:

background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat right top;

Open in new window

ASKER CERTIFIED SOLUTION

Jagadishwor Dulal

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jagadishwor Dulal

Again manage your background image url as you have provided url(http://www.softkey.no/webtest/images/login-sprite.png) but i have used it in relative path.

team2005

ASKER

Hi!

This dosent work ?

background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat right top;

Jagadishwor Dulal

See the latest comments

team2005

ASKER

Hi!

Please show me what to fix

Jagadishwor Dulal

Can you post your code or url?? Or add this line

 background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat left -10px;
padding-left: 25px;

Open in new window

team2005

ASKER

Hi!

Tryed your code, but still dosent work ?

URL:
http://www.softkey.no/webtest/test1.html

Jagadishwor Dulal

If you are posting the right image login.png than I am sure it's right in your design you are asking for the background image position and I write for the same if not write or clear what do you need????

team2005

ASKER

Hi!

I want it to be like the included picture (included now)

Want the text to be centered to
login2.png

Jagadishwor Dulal

Just change the background position see below:

background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat right -10px;

Open in new window

team2005

ASKER

Hi!

Sorry, diden work

Jagadishwor Dulal

That's why I was asking for the url, I am testing in your url : http://www.softkey.no/webtest/test1.html and you have added #username and #password to position background image .

Now replace your css :

/*--------------------*/

#inputs input {
    background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png)no-repeat;
    border: medium none !important;
    box-shadow: none !important;
    color: #FFFFFF;
    font: bold 20px Arial;
    margin: 0 0 10px;
    outline: medium none !important;
    padding: 15px 30px 15px 15px ;
    width: 353px;
}
#username {
    background-position: 364px  -4px !important; /* Here 364px is for left position and -4px for top */
}
#password {
    background-position: 364px -52px !important;
}

Open in new window

team2005

ASKER

thanks