Way to reveal <div> background image?

diafygi

03-07-2007, 04:21 PM

Hello all,

I am trying to show a background of a grandparent <div>. I've included a nice little example that you can try yourself.

<html>
<head>
<style type="text/css">
div.background_1{ background-color: blue;
padding: 20px;}
div.background_2{ background-color: pink;
padding: 20px;}
a.link{ padding: 10px;}
a.link:hover{
/* Instead of white, */
/* is there any way */
/* to show background_1? */

background-color: white;}
</style>
</head>
<body>
<div class="background_1">
<div class="background_2">
<a href="#" class="link">Link1</a>
</div>
</div>
</body>
</html>

Instead of background colors, however, the backgrounds would be images. I know I can just crop background_1 and insert it as an image, but that would be too easy wouldn't it? Is there any way I can simply see through to background_2?

Thanks ya'll!

_Aerospace_Eng_

03-07-2007, 04:30 PM

Just use the background color background_2 so instead of white use blue. No you can't see through background_2 because its not transparent.

phoenixshade

03-07-2007, 05:59 PM

You can't change the parent div background to transparent under the link, but you can simulate the effect you want using the background-attachment: fixed property. The downside is that the position of the background image is fixed with respect to the viewing window, so it won't scroll with the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-test</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div.background_1 {
background: #FEC url(chopin.jpg) no-repeat fixed top left;
padding: 20px;
}
div.background_2 {
background-color: #FFF;
padding: 20px;
}
.background_2 > a.link {
padding: 10px;
}
.background_2 > a.link:hover {
background: #FEC url(chopin.jpg) no-repeat fixed top left;
}
</style>
</head>
<body>
<div class="background_1">
<div class="background_2">
<a href="#" class="link">Hover over this link to reveal image beneath</a>
</div>
</div>
</body>
</html>
I've published a working example (http://mysite.verizon.net/phoenixshade3/staging/linkback/overlinks.html). It works in IE7 and FF2, and should work in all other CSS1 compliant browsers. It breaks in IE6.

diafygi

03-07-2007, 06:53 PM

It works in IE7 and FF2, and should work in all other CSS1 compliant browsers. It breaks in IE6.

Thanks phoenixshade! Is there any way to create the same effect in IE6?