?
Solved

How to align picture to the right

Posted on 2013-05-23
14
Medium Priority
?
346 Views
Last Modified: 2013-05-28
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
0
Comment
Question by:team2005
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
14 Comments
 
LVL 15

Expert Comment

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

Open in new window

0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 2000 total points
ID: 39190719
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
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39190721
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
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
LVL 2

Author Comment

by:team2005
ID: 39190783
Hi!

This dosent work ?

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

Expert Comment

by:Jagadishwor Dulal
ID: 39190809
See the latest comments
0
 
LVL 2

Author Comment

by:team2005
ID: 39190969
Hi!

Please show me what to fix
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39191069
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
 
LVL 2

Author Comment

by:team2005
ID: 39191090
Hi!

Tryed your code, but still dosent work ?

URL:
http://www.softkey.no/webtest/test1.html
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39191150
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
 
LVL 2

Author Comment

by:team2005
ID: 39191179
Hi!

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

Want the text to be centered to
login2.png
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39191209
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
 
LVL 2

Author Comment

by:team2005
ID: 39191239
Hi!

Sorry, diden work
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39191352
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
 
LVL 2

Author Closing Comment

by:team2005
ID: 39201109
thanks
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question