How to subtract background from an image?

How can I resolve this border/background image clash?

• I have a <div> element with a border and background image. I've positioned the background image to the top right to give a page curl effect. The problem is that the border appears adjacent to the background image instead of hiding it so I get both the top right background image and top right border being shown. How can I get it so that I can still keep the border but have the background image cover what's in the top right hand corner? Thanks. Here's the css: #main { padding: 20px 20px 0 20px; width: 650px; float:right; margin-top: 30px; margin-right: 125px; border: solid 1px #c3c0be; background: url('img/page_curl.png') no-repeat top right #fef1e9; }

• Answer:

  You can't do it with just one div since, as you said, the background will always appear next to the border. One way of doing it would be something like this: <style> #container { position:relative; width: 650px; margin-top: 30px; margin-right: 125px; } #content { padding: 20px 20px 0 20px; border: solid 1px #c3c0be; } #pageCurl { position:absolute; top:0; right:0; background: url('img/page_curl.png') no-repeat top right #fef1e9; width:100px; /* replace with actual size of your image */ height:100px; } </style> <div id="container"> <div id="pageCurl"></div> <div id="content">your content</div> </div>