[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

How to align picture to the right

Posted on 2013-05-23
14
Medium Priority
?
348 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

656 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