Find solution
How to subtract background from an image?

How do you make a floating page over a background image in HTML?

  • I want a static background image with a white page about 80% width floating over the background with a small shadow. When you scroll down the page the background should also remain static so its just the page scrolling/floating up and down over the background. This is what I manged to get so far: <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%;"> </div> </body> </html> Except This page has no shadow and when you scroll down the background moves with it but I need it to stay put so it looks like the page is floating over the background. I tried using CSS shadows but w3schools shows it's not supported in IE, which is a problem. I just can't figure it out cos I'm still learning all of this. Is there any other way to do this?

  • Answer:

    For shadows: Create a backgroundimage which already has a shadow. You shouldn't use the CSS3 property jet, because it isn't supported by older browsers and IE. To fix your background, use: background-attachment:fixed;

russel walker at Yahoo! Answers Visit the source

Was this solution helpful to you?

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.