Question

CSS

#lego{
    background: url(images/lego.png) no-repeat center bottom ;
}

HTML

<div id="lego"></div>

Without adding any tag or HTML.

Without Javascript.

lego is 100% wide, while the image is not.

How to apply box-shadow (or other styling) specifically to the image only (not to the 100% wide lego element).

Answer 1

you could use css pseudo :before or :after elements to contain your image so that you could just give :before element a shadow but not the lego div. Check out this fiddle – http://jsfiddle.net/cNeWW/

#lego{
    width: 100%;
    position: relative;
}

#lego:before{
    content: "";
    background: url(images/lego.png) no-repeat center bottom;
    position: absolute;
    width: <background width>;
    height: <background height>;
    display: block;
    box-shadow: 5px 5px 3px #000;
}