Hi Cedric,

I would like to have a shadow behind my page background and above the browser background on this recent site done in iWeb www.bathroomsandkithchenstoo.com. The browser background is an image. For example, in the iWeb themes "Layered Paper" I understand how they they built it in PS, added rounded corners and a shadow, added a piece of the static background around the edges, then cut it into three horizontal pieces so the page can expand up and down with content as needed when it is "tiled".

However, the browser background in the iWeb "Layered Paper" theme is a static image that can be "tiled" to fill the area to infinity so I can't use this with an image that changes. (see the image background of website above). How do I apply a drop shadow behind a page background and above a browser background that is an image, not a static color? For my site www.worksofbart.com I created a page background file in PS that is shadowed, rounded corners, has a little edge all around of the background color, then imported it. Then I matched the solid color in the browser background and it works great. Just not sure how to do this with an image in the browser background that changes (even a gradation of color would be OK). Could this be done with code?

Any ideas would be most helpful. Thanks in advance. BP

I would add the top and the bottom part into the header/footer part of the page and make it look like it's the background while it isn't.

Regards,
Cédric

Thanks for your reply.

Your idea works great with static colors, or patterns that are the same. But, unique images like the bathroom tile pattern on the site noted below move in the background as the browser window is enlarged or reduced. This is the only issue I can think of with your solution, see website example here or moving background: www.bathroomsandkithchenstoo.com.

So what if...
Since the browser background image on this site moves around and the page background image above it slides over it as you expand or reduce the browser window, is there a code for iWeb that would keep the page background and browser background fixed? If there is, it would appear that the two are locked and I could add a touch of imagery in PS around the edges of the page image like iWeb does in the "Layered Paper" theme to match them up making them appear to be the same.

I hope there is a simple code to keep the window and background image fixed. Please let me know where to place the code if there is one and if it needs to be on every page. I will use your directions with Mass Replace It to apply the code. Bart

Using this code (needs to be placed somewhere after the body so I guess you can place a textbox to be replaced anywhere on the page)

<script language="JavaScript" type="text/javascript">
<!--

parent.document.body.style.backgroundColor='#fff';
parent.document.body.style.backgroundImage='url(http://www.bathroomsandkitchenstoo.com/ ... round2.jpg)';
parent.document.body.style.backgroundPosition='50% 0%';
parent.document.body.style.backgroundAttachment='scroll';
parent.document.body.style.backgroundRepeat='repeat';

// -->
</script>

gets the background fixed and centered so it doesn't move around anymore which in turn means that the vertical lines should cause no issue anymore. You may also change scroll to fixed if you don't want the background to scroll.

You can also add

<div style="width:10px; height:10px;">
<script language="JavaScript" type="text/javascript">
<!--

parent.document.body.style.backgroundColor='#fff';
parent.document.body.style.backgroundImage='url(http://www.bathroomsandkitchenstoo.com/ ... round2.jpg)';
parent.document.body.style.backgroundRepeat='repeat';
parent.document.body.style.backgroundPosition='50% 0%';
parent.document.body.style.backgroundAttachment='scroll';

// -->
</script></div>

in an HTML Snippet if you prefer using HTML Snippets. Works only once published. The snippet itself doesn't display on the page once published. Again you may change scroll to fixed if you want to.

You may also eliminate this line
parent.document.body.style.backgroundColor='#fff';