January 24, 201115 yr I managed to implement the background below with a 40 x 40 px image. It seems to work ok as it gets tiled. Now I want to put a white page over it with a small shadow so that it looks like the page is floating over that tiled orange stripe background. The html boxes with don't seem to work cos I can't align it in the center and if I use a box border then it makes a border at the top too which I don't want. Please help. It should look like this but with a shadow behind the white page:
January 24, 201115 yr I managed to implement the background below with a 40 x 40 px image. It seems to work ok as it gets tiled. Now I want to put a white page over it with a small shadow so that it looks like the page is floating over that tiled orange stripe background. The html boxes with don't seem to work cos I can't align it in the center and if I use a box border then it makes a border at the top too which I don't want. Please help. It should look like this but with a shadow behind the white page: Not sure I understand correctly but z-index in your css might solve your problem
January 24, 201115 yr Do you mean something like this? If so the simplest way is to set the background of you main div to an png of the page and shadow and repeat it vetically. #mydiv{ background: url(background.png) repeat-y; }
January 25, 201115 yr Author Do you mean something like this? If so the simplest way is to set the background of you main div to an png of the page and shadow and repeat it vetically. #mydiv{ background: url(background.png) repeat-y; } Thanks for the help. I decided to use inline css cos I just couldn't get it to work otherwise. I'm still learning. I managed to get the stripe background and the white page over it now with this: <html> <head> <style type="text/css"> body {background-image:url(background.png);} </style> </head> <body> <div style="background-image:url(page.png); background-repeat:repeat-y; margin-top:-8px; margin-bottom:-8px; margin-left:auto; margin-right:auto; width:80%;">blablabla <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> </body> </html> Now I just have to figure out two more things: 1)How to add the shadow. I can't seem to find it anywhere on w3schools and the css shadow is not supported in IE which makes it useless cos I need to cater for IE especially. 2)how to make the tiled background image stay put when you scroll down the page so it really looks like the page is floating over the background. Thanks so much for the help. I suspect this is a kindergarten like query but I really can't figure it out. You helped allot so far. Edited January 25, 201115 yr by russel walker
January 25, 201115 yr 1)How to add the shadow. I can't seem to find it anywhere on w3schools and the css shadow is not supported in IE which makes it useless cos I need to cater for IE especially. 2)how to make the tiled background image stay put when you scroll down the page so it really looks like the page is floating over the background. 1) Don't use the new CSS3 box-shadow as IE6-8 won't process this. You may have to use images instead. Background-images with repeat-y should continue down as far as the bottom of the div content. 2) Use background-attachment: fixed; to make the background-image stay fixed while you scroll content over it. Edited January 25, 201115 yr by Wickham
January 27, 201115 yr Author Wow it took me a while to follow up on that but anyways it works now. I did have to sacrifice the shadow in order to use the background-attachment:fixed. The only way I would know how to get the shadows with images is to make the orange background and the white page(#page) one single image. But if so then when I zoom in and out or use different res, the white part which is the page zooms off to the right. I need #page to be in the center always even at different res. So far I manage that with body {text-align: center; background-image:url(tile.png); background-attachment:fixed;} #page {margin-left:auto; margin-right:auto;} The text-align:center; is to make it work in IE because auto margins don't work in IE apparently. I'm starting to notice a trend with IE and incompatibility. hmmm? I wonder if experienced web developers find IE as irritating.
Create an account or sign in to comment