Solved

How to align picture to the right

Posted on 2013-05-23
14
334 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
  • 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 500 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

943 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now