Shadow larger than the background image [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Ran into this problem when I was trying to add shadows to the thumbnail border image. Is there any way around this? :s
Here's the chunk of the code:
#content .item{
width: 285px;
height: 240px;
float: left;
margin: 0 10px 10px 0;
padding: 15px 0 0 15px;
background: url(../images/thumbnail.png) no-repeat;
background-size: 285px 240px;
box-shadow: -5px -5px 10px #CCC;
}
http://jsfiddle.net/ju3hxjuu/4

Answer 1

What is your problem Please Clearly Specify.
If you are talking about the white border around your images + shadow.
Then please note that the adding you just used making that white border because your div is larger than that of image inside that. If you want that shadow appear only around your images then you have to remove padding. like this :
#content .item{
width: 285px;
height: 240px;
float: left;
margin: 0 10px 10px 0;
background: url(../images/thumbnail.png) no-repeat;
background-size: 285px 240px;
box-shadow: -5px -5px 10px #CCC;
}

Answer 2

jsfiddle: http://jsfiddle.net/harshdand/ju3hxjuu/5/
u dont actually require an image to create thumbnail background
Html
<div class="item">
<img src="http://i.imgur.com/t2cfwup.png" alt=""/>
</div>
Css:
body{
background-color: #EEE;
}
.item{
width: 285px;
height: 240px;
float: left;
margin: 10px;
padding: 15px;
background-color:white;
background-size: 285px 240px;
box-shadow: 10px 10px 10px #CCC;
}
.item img{
width:100%;
}