CSS background change within a div

fujihime · 11-28-2012, 04:54 AM

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>

sunfighter · 11-28-2012, 01:47 PM

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.