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?

P.S. I know there is an issue with the Password placeholder.

take a look here, bootstrap can solve it for you or you can use a similar way : http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box — SED, Dec 08 '15 at 14:16
If you are using Chrome, open up your developer tools with F12 and check the network tab, and check out the request for `email.png`. Is the status 404? — Mister Epic, Dec 08 '15 at 14:19
No there is no status 404 on google developer tools when I open in, and no the image path isn't probably wrong — dev_py_uk, Dec 08 '15 at 14:25
https://jsfiddle.net/k1hdju5g/ is seems to work with this link but no images that are saved in my directory — dev_py_uk, Dec 08 '15 at 14:33

Metal Wing · Accepted Answer · 2015-12-08T14:42:46.390

1

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. i.e. 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.

edited Dec 08 '15 at 14:42

answered Dec 08 '15 at 14:24

Metal Wing

1,065
2
17
40

When I do this with an image from my img directory it doesnt work however, and when using the image from a url address, it alters the size of the form – dev_py_uk Dec 08 '15 at 14:28
@drewith I made another attempt at this. Please have a look at [my page](http://nexrem.com/test/test/formimage.html) I've updated my original response with it as well. – Metal Wing Dec 08 '15 at 14:40
I've just attempted this edit and it still doesnt display my image, I've even moved the image into the same folder as the form. When adding the comma it just seems to distort the size of other inputs on the page – dev_py_uk Dec 08 '15 at 14:46
AHA! the images I was trying to use were read protected. therefore not allowing me to link them. I have exported them as my own image and renamed them and now it works. cheers – dev_py_uk Dec 08 '15 at 14:52
@drewith Glad you sorted it out! My next suggestion was to use google dev tools, and check if you able to see the icon source in the css. [Image for reference](http://imgur.com/JwJoJDQ.png) I wonder if it would have shown the image when its read protected. – Metal Wing Dec 08 '15 at 14:54

score 0 · Answer 2 · answered Dec 08 '15 at 14:23

0

You can try this:

background: #fff url('../img/email.png') 3% center  no-repeat;

answered Dec 08 '15 at 14:23

Mahbub Hasan

441
5
5

Displaying an image as a background of a html form using CSS

2 Answers2