2

I need to have box shadow on top, right, and left and an image at the bottom. I tried like this:

container
  child-container

giving the top inset show to the container:

box-shadow: 0 5px 5px rgba(0, 0, 0, 0.23) inset;
padding: 8px 0 6px;
background: url("../bottom_image.gif") no-repeat scroll center bottom #FFFCD8;

and to the child, give right and left inset shadow:

box-shadow: 5px 0 5px -5px #999999 inset, -5px 0 5px -5px #999999 inset;
padding: 0 25px;

But there is a line mentioned at the top of the child container.

Can anyone tell me proper way to do it?

Drew Gaynor
  • 8,292
  • 5
  • 40
  • 53
Ha0710
  • 23
  • 1
  • 4

1 Answers1

0

try this:

jsFiddle

.container {
    box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.23) inset;
    padding:8px 25px 0;
    background: url("../bottom_image.gif") no-repeat scroll center bottom #FFFCD8;
}

<div class="container">
    <div class="child-container">FooBar</div>
</div>
PseudoNinja
  • 2,846
  • 1
  • 27
  • 37
  • thanks @Oldcode101. It works really good, just need to amend the image a bit to cover the image left and right corners. – Ha0710 Dec 22 '11 at 09:32