Display image using css

Question

I am trying to display image using css. But it is not display anyway. please help me. My code is :

//styles.css

table tr td span.glyphicon-eye-open{
	background: url("../images/private-eye.png") no-repeat;
}

//Register.php

<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open"></span>  
</td>
  <tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>

I also has included 'link rel="stylesheet" href="../css/styles.css" type="text/css" /' in head with tags

"Not display" doesn't give much information. Are you sure the image is placed at the relative path you're pointing at? Try checking Network tab in Dev Tools on Chrome or Firezilla in Firefox. — Lazar Ljubenović
– Lazar Ljubenović, Commented Aug 7, 2016 at 11:56
I placed image in separate 'images' folder, which in given path is true. — Sudip977
– Sudip977, Commented Aug 7, 2016 at 11:57
@Sudip977 Try something like this then: 'images/private-eye.png' for ur background: url — Nick Parsons
– Nick Parsons, Commented Aug 7, 2016 at 11:59
That is because your span has no height at all. Every span has no height until you insert some text in it or edit its height via CSS. — PDKnight
– PDKnight, Commented Aug 7, 2016 at 12:06

PDKnight · Accepted Answer · 2016-08-07 12:10:53Z

5

That is because your span has no height at all. Every span has no height until you insert some text in it or edit its height via CSS. For example, I've put some text in here, like so:

span.glyphicon-eye-open {
    background: url("http://beerhold.it/320/200") no-repeat;
    color: #fff;
}

//Register.php

<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open">@@@</span>  
</td>
  <tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>

edited Aug 7, 2016 at 12:10

PDKnight

7227 silver badges25 bronze badges

answered Aug 7, 2016 at 11:59

Andrei Fedorov

4,0172 gold badges15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rick Johnson · Accepted Answer · 2016-08-07 12:22:38Z

Change this line

<span class="glyphicon-eye-open"></span>

to:

<span class="glyphicon-eye-open">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

DEMO

span.glyphicon-eye-open {
	background: url("http://previews.123rf.com/images/arnau2098/arnau20981503/arnau2098150300166/37873708-small-squares-background-color-Stock-Photo.jpg") no-repeat;
}

//Register.php

<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>  
</td>
  <tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>

Sudip977 · Accepted Answer · 2016-08-07 12:17:25Z

0

It now works fine using following css code :

table tr td span.glyphicon-eye-open{
background: url("../images/private-eye.png");
background-repeat:no-repeat;
/*width:50px;
height:50px;*/
padding-left:15px;
padding-right:15px;
padding-bottom:2px;

}

answered Aug 7, 2016 at 12:17

Sudip977

752 silver badges10 bronze badges

2 Comments

Sudip977 Over a year ago

I have also used width and hieght of span, but not working.

Sudip977 Over a year ago

It also works when I gives sufficient number of   between <span> and </span>

Sidath · Accepted Answer · 2016-08-07 12:00:01Z

-1

try this one

.glyphicon-eye-open{
background: url("../images/private-eye.png");
background-repeat:no-repeat;
}

Make sure your css is included

answered Aug 7, 2016 at 12:00

Sidath

9810 bronze badges

Collectives™ on Stack Overflow

Display image using css

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related