Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Way to reveal <div> background image?

    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.

    Code:
    <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!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    near Washington, DC
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <!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. It works in IE7 and FF2, and should work in all other CSS1 compliant browsers. It breaks in IE6.
    — Wilford Nusser
    Validate Your Code: (X)HTML CSS
    An HTML Email is NOT a Web Page: HTML Email Guide (1.2Mb pdf) Webmail CSS Support
    REGEX: Brought to you by Psychotic Crack-Smoking Monkeys

  • #4
    New Coder
    Join Date
    Feb 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •