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
LVL 2
team2005Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Jagadishwor DulalConnect With a Mentor Braces MediaCommented:
Oh sorry as your image It's left align see my example below:

<style>
.username,.password{
	  height:20px;
	 padding:10px 25px;
}
.username{
	 background: #96825a url(login-sprite.png) no-repeat left -10px; 
}
.password{
	 background: #96825a url(login-sprite.png) no-repeat left -62px; 
}
</style>

Open in new window

I have assumed your input username and password will be almost 40px height and in background the left will position background image in left and the -10px and -62px will move the image upwards that value you can manage in your style see the html code for my example :
<form name="form" id="login">
	<input type="text" name="username" class="username">
    <input type="password" name="password" class="password">
</form>

Open in new window

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

Open in new window

0
 
Jagadishwor DulalBraces MediaCommented:
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.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
team2005Author Commented:
Hi!

This dosent work ?

background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat right top;
0
 
Jagadishwor DulalBraces MediaCommented:
See the latest comments
0
 
team2005Author Commented:
Hi!

Please show me what to fix
0
 
Jagadishwor DulalBraces MediaCommented:
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

0
 
team2005Author Commented:
Hi!

Tryed your code, but still dosent work ?

URL:
http://www.softkey.no/webtest/test1.html
0
 
Jagadishwor DulalBraces MediaCommented:
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????
0
 
team2005Author Commented:
Hi!

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

Want the text to be centered to
login2.png
0
 
Jagadishwor DulalBraces MediaCommented:
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

0
 
team2005Author Commented:
Hi!

Sorry, diden work
0
 
Jagadishwor DulalBraces MediaCommented:
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

0
 
team2005Author Commented:
thanks
0
All Courses

From novice to tech pro — start learning today.