# Drop shadows in site layout

**URL:** <https://forum.kirupa.com/t/drop-shadows-in-site-layout/185227>\
**Category:** web dev\
**Created:** [April 11, 2006, 9:13pm UTC](https://forum.kirupa.com/t/drop-shadows-in-site-layout/185227 "2006-04-11T21:13:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [April 11, 2006, 9:13pm UTC](https://forum.kirupa.com/t/drop-shadows-in-site-layout/185227/1 "2006-04-11T21:13:21Z")

</div>

Say I have a content box over a repeating background. I want the content box to have a drop shadow. How do I go about doing this? If I make the shadow an image, then the shadow will not always match-up with the background if the user contantly changes the size of the browser window.

---

<div class="post-metadata">

**Author:** ![norie](https://avatars.discourse-cdn.com/v4/letter/n/3ec8ea/32.png) [@norie](https://forum.kirupa.com/u/norie)\
**Post date:** [April 17, 2006, 6:12am UTC](https://forum.kirupa.com/t/drop-shadows-in-site-layout/185227/2 "2006-04-17T06:12:06Z")

</div>

> [@NeoDreamer](#):
>
> Say I have a content box over a repeating background. I want the content box to have a drop shadow. How do I go about doing this? If I make the shadow an image, then the shadow will not always match-up with the background if the user contantly changes the size of the browser window.

use a semi-transparent png. here’s how i load a transparent png into a background:

```auto

table#FeaturedCompany{
	border: 1px solid #FFF;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/images/SemiTransparentBG.png'); /*only IE sees this*/	
	width: 400px;
	height: 96px;
	margin: 0px auto 0px auto;
}

table#FeaturedCompany[id]{ /*IE ignore this*/
	background-image: url(/images/SemiTransparentBG.png);
	background-repeat: repeat;
}

```

just google: transparent png

and you’ll get a bunch of articles. You’re sure to find the right one.

---

<div class="post-metadata">

**Author:** ![fluid\_tw0](https://avatars.discourse-cdn.com/v4/letter/f/48db29/32.png) [@fluid\_tw0](https://forum.kirupa.com/u/fluid_tw0)\
**Post date:** [April 17, 2006, 7:06pm UTC](https://forum.kirupa.com/t/drop-shadows-in-site-layout/185227/3 "2006-04-17T19:06:59Z")

</div>

trnasparent bgs will slow down the site, play with the css

example:

```auto

  +---- ... ---+--+
  | | | <--- (1)
  | +--+
  | | | <--- (2)

  : : :
  ' ' '

  | | |
  +--+- ... ---+--+
  | | | |
  +--+- ... ---+--+
   ^ ^ ^.
   | '. '.
  (3) (4) (5)

(1) : top part of the shadow
        image looks like

        .
        :.
        :::.
        ::::.

        code:
        <td align="left" valign="bottom"><img src="shadow_top.jpg" /></td>

(2) : right side of the shadow
        image looks like

        ::::.
        ::::.
        ::::.
        ::::.

        code:
        <td style="background: url(shadow_right.jpg) repeat-y left;">&nbsp;</td>

(3) : left part of the shadow
        image looks like

        '::::
         ':::
          '::
            '

        code:
        <td align="right" valign="top"><img src="shadow_left.jpg" /></td>

(4) : bottom side of the shadow
        image looks like

        :::::
        :::::
        :::::
         ' '

        code:
        <td style="background: url(shadow_bottom.jpg) repeat-y left;">&nbsp;</td>

(5) : left part of the shadow
        image looks like

        ::::'
        :::'
        ::'
        '

        code:
        <td align="left" valign="top"><img src="shadow_bottomright.jpg" /></td>

AND DON'T FORGET TO SET CELLS' DIMENSIONS!

```

---

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [April 18, 2006, 1:59am UTC](https://forum.kirupa.com/t/drop-shadows-in-site-layout/185227/4 "2006-04-18T01:59:54Z")

</div>

Interesting ASCII art. But that won’t help if your background has an intricate pattern. A slight size difference of the browser will make the seems of the shadow show.