The border image is not appearing can anyone help me?
#sidebar li {
padding-left: 30px;
border-bottom: 1px dotted #4A3903;
background: url(images/example.PNG) no-repeat 15px 50%;
}
Do you want background image or border image? For background-image use background-image and quote your url:
#sidebar li {
padding-left: 30px;
border-bottom: 1px dotted #4A3903;
background-image: url('images/example.PNG') no-repeat 15px 50%;
}
For border-image use border-image:
#sidebar li {
padding-left: 30px;
border-bottom: 1px dotted #4A3903;
-webkit-border-image:url('border.png') 10 10 round;
-o-border-image:url('border.png') 10 10 round;
border-image:url('border.png') 10 10 round;
}
Try adding
display: block;
to your styles as well. (inline-block may also work, if needed)
I've tried your code with - DEMO
<div id="sidebar">
<ul>
<li></li>
</ul>
</div>
CSS
#sidebar li {
padding-left: 30px;
border-bottom: 1px dotted #4A3903;
background: url(http://www.placehold.it/200x200) no-repeat 15px 50%;
}
But the background-image
is not showing up FULL.
When you add width
and height
to your li
tag equals to your image
, it will solve the problem.
#sidebar li {
padding-left: 80px;
border-bottom: 1px dotted #4A3903;
background: url(http://www.placehold.it/50x50) no-repeat 0px 0px;
width:auto;
height:50px;
list-style:none;
font-size:24px;
vertical-align: middle;
display: table-cell;
}
UPDATED - DEMO
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.