fixed background with shadow

Im looking to make a page with a tiled background and shaded edges like the one here. http://www.projectseven.com/tutorial...s2/shadow2.htm

BUT! Notice how the tiles move with the page. I would like the tiles to be in a fixed position so that the page moves over the tiles not with. What makes it complicated is I would like the shadow behind the page.

Any takers?

You need the graphics forum for the images. Just get 2 rows of tiles. The css is simple.

body {
background: #333 url(/tiles.png) repeat-y;
}

div#wrapper {
background: #EEE url(content.png) repeat-y;
}

The link gives me a message "Page no longer active..."

im seeing the page but not understanding the question.. do u mean u want a fixed background and shadows made into the background?

I guess that web page got taken down. Here is my visual attempt at explaining myself.

Thanks

Attached Images

tile.jpg (31.5 KB, 51 views)

add fixed to the background property

Code: Select all

body {
 background: #000 url(background.jpg) repeat-y fixed 0 0;
}

Simple as that.

Well, here is my near blank canvas. http://digitizeyourdigits.com/aaron

Can you show me how to ad to my code a row of darkened/shadowed tiles to the top of the background. I think having a shadow on the sides of the page may not be a good idea when using a pattern.

Thanks

With such a dark background I'm not sure your shadow would even show up.

You need to do as karinne said...
Then your shadowed pieces will always line up with your background.

Or you could make it all one picture.

Attached Images

test.png (13.4 KB, 37 views)

The reason I don't do it like that is because I don't want the background to move with the page, I want the page to hover over the pattern.

Use that picture I made. You'll need to fix it up b/c it's ugly and probably not the right pattern but, then the background doesn't move when you scroll. You just then have to make your css positio0n the text over the image.

You could also make a background with the shadows and leave a blank space in between left and right shadows. Then lay your content over it.

Ok, look at this page here, it's working now.

http://www.projectseven.com/tutorial...s2/shadow2.htm
I want my page to have a shadow on the left and right side like this one.

But, when you drag the bottom right corner of your brouser left and right to resize notice how the background moves with the page. That is not what I want. I want the page to hover over the tiles not move with. That image you sent me I don't think will work because the background is fixed to the body, it needs to be seperate.

I am beginning to think no one knows what I'm talking about and that it is not possible to do. That is why I think I should settle for a shadow on the top of the page background. I know that is possible.

What do you think?

yeah dude thats just one image go on there right click some were and click save background as ull see its just one image with the content shunted into the center if u dont want the content box to move when u resize the brouser then your best bet is to cut the shadows into 2 different images and set them as the background into 2 seperate divs that way what ever screen res u got it on it will look the same enit but it doesnt work well with patterns unless ur not fussed about them lining up properly lol but yeah if u need help pm me and ill show u what i mean dude