Displaying an image as a background of a html form using CSS
Question
I have two symbols currently in my sign in form and have tried adding a third which I have downloaded from Google as compared to the other two which came with a framework I had been using.
When I try to add the one from Google, nothing appears in the input box.
HTML
<input type="email" value="" placeholder="Enter Your Email" id="email" name="email" />
CSS
.login-block input#email {
background: #fff url('../img/email.png') 3% no-repeat;
background-size: 6% 130%;
line-height:300%;
max-width:80%;
padding-right:0%;
}
The CSS is the same that works with the other two images, I've tried changing the background size, padding etc. but still no image appears.
Can anyone help?
EDIT
Why will this work with links from internet images but not with paths to images in my folder directorys?
PS I know there is an issue with the Password placeholder.
2 answers
solution1
1 ACCPTED 2015-12-08 14:24:13
If you add a comma to your css (between login-block and input), it appears to work? Jsbin link
.login-block, input#email {
background: #fff url('../img/email.png') 3% no-repeat;
background-size: 6% 130%;
line-height:300%;
max-width:80%;
padding-right:0%;
}
Edit: I've already re-created this on my site . The code for the page is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.login-block, input#email {
background: #fff url('image.png') 3% no-repeat;
line-height:300%;
max-width:80%;
padding-left:4%;
}
</style>
</head>
<body>
<input type="email" value="" placeholder="Enter Your Email" id="email" name="email" />
</body>
</html>
Edit2: Do make sure you can in fact visit the image via the URL. ie the image on my site is accessible via http://nexrem.com/test/test/image.png as it is in the same folder as the html file. Yours seems to be a level up and in a folder.
solution2
0 2015-12-08 14:23:51
你可以试试这个：
background: #fff url('../img/email.png') 3% center no-repeat;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.