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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS background change within a div

    Hello everyone, I'm new here and is a beginner to CSS/jQuery. I'm searching for way to change the background image of a div. When I click on a link on the navigation that will link within the same file (am I making sense?), and with a cross fade transition.

    This is the website I'm working on. The pages are fading in and changes but the background image remain fixed. I want to change the background-image in the blackish background (with words), not the sunrise background.

    http://entwurvian.net/wip/maxivision/index.html http://entwurvian.net/wip/maxivision/style.css

    ----

    I tried implementing this script which I found online but it didn't seem to work. Is it because it conflicts with some codes in my files?

    Thanks in advanced!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>TheWebsite</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #hdr {
    	height : 150px;
    	width : 100%;
    	background-image: url(gang/Bass.png);
    	background-repeat: no-repeat;
      }
    .hdr1 {
    	height : 150px;
    	width : 100%;
    	background-image: url(gang/carl.png);
    	background-repeat: no-repeat;
      }
    .hdr2 {
    	height : 150px;
    	width : 100%;
    	background-image: url(gang/Chet.png);
    	background-repeat: no-repeat;
      }
    .hdr3 {
    	height : 150px;
    	width : 100%;
    	background-image: url(gang/Mel.png);
    	background-repeat: no-repeat;
      }
    </style>
     
    </head>
    <body >
    <div id="hdr">Sometext</div>
     
    <div><b>Alternate Background Images</b> -<br /> 
        <a href="#none" onclick="document.getElementById('hdr').className ='hdr1'">Option 1</a>
        <a href="#none" onclick="document.getElementById('hdr').className ='hdr2'">Option 2</a>
        <a href="#none" onclick="document.getElementById('hdr').className ='hdr3'">Option 3</a>
        <a href="#none" onclick="document.getElementById('hdr').className ='hdr'">Default</a>
      </div>
     
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,220
    Thanks
    23
    Thanked 606 Times in 605 Posts
    First: change #hdr {..... to .hdr {....
    That moves your background from the ID to the class attribute and it's the class attribute that your changing with the onclick.

    Lastly: change <div id="hdr">Sometext</div> to <div id="hdr" class="hdr">Sometext</div>
    So we have a class to change.

    That should do it.


  •  

    Tags for this Thread

    Posting Permissions

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