| SitePoint Sponsor |
I've started to create HTML websites, and I have a question about design. I want to get this efect in page borders, an efect like a shadow. But a shadow for all the page background between the content background and the <body> background.
I don't know how to do it and I want to learn. If someone could be so helpful I will be very plesant.
Thanks.
PD: excuse for my english, I'm from Spain. I hope you can understand me.
Hi Morpheo,
1st welcome to the forum and did you have introduce yourself in Introduction section?
(i'm newbie too)
As i know i usually used css to make drop shadow, you can figure out in phoenity.com/newtedge/drop_shadow/
Good luck
my work and play
The efect I want to get is this:
img115.imageshack.us/img115/9950/imagenkp9rr6.jpg
If you're using a fixed width layout then make an image in your graphics editor which is basically a slice across the layout - shadow, content background colour, shadow which only needs to be about 10px high. Then apply it as a vertically repeating background to the body element in the stylesheet like this (assuming a white background):
body {background:#fff url(../images/background.jpg) repeat-y center top;}
You can do this more or less on fluid layouts too - it's just a bit more fiddly.
What I have right now is a background gradient with REPEAT-X to get that gradient. Your solution Tailslide is perfect but online one problem, if I do REPEAT-Y I can't make a gradient background.
Anyway, is a great solution. I will put that in the website and I'm going to see if it's beautiful or not.
Thank you
repeat-x will repeat the image horizontally. repeat-y will repeat it vertically so if you want a shadow effect to appear vertically down the page (e.g for a shadow border down the edge of the main container) then you'd want repeat-y.
Posting Permissions
Bookmarks