Ok, so in the header animation im trying to add a new background image like the guitar. I changed the guitar image with one more appropriate to the site. Im trying to add a new div with a new background image placed in a different location.
I inserted basically the same div as the default guitar div. with styles in the gk.stuff.css files to match.
the problem is the image does not show up. I can see that it is in the page when i analyze the breakdown with firebug. but the image does not appear.
also, tested this second image in the first guitar div and it shows up, so its not a problem with the .png file.
here's the css that i added in the gk.stuff.css file the first is the default, second is the one added.
following the css is the actual html in the module.
- Code: Select all
.gk-animation .gk-guitar {
background: transparent url('../images/guitar.png') no-repeat 0 0;
height: 419px;
position: absolute;
right: 0;
text-indent: -9999px;
top: 30px;
width: 187px;
z-index: 2;
}
.gk-animation .gk-volcom{
background:: transparent url("../images/volcom.png") no-repeat 00;
height:200px;
position:absolute;
right:500;
text-indent: -9999px;
top:40px;
width:300px;
z-index:1;
}
<div class="gk-animation" data-height="530">
<div class="gk-animation-wrap">
<div class="gka-bg">Background</div>
<h2 class="gk-scale-up" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="200" data-time="500">'Ena Media</h2>
<h1 class="gk-scale-up" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="600" data-time="500">Grand Opening 12.21.12</h1>
<div class="gk-stars" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="1000" data-time="500">* * * * * *</div>
<div class="gk-jscounter gk-scale-up" data-dateend="21-12-2012" data-timeend="18:00" data-timezone="-10" data-start="{opacity:0}" data-end="{opacity:1}" data-delay="900" data-time="500">Counting finished!</div>
<div class="gk-volcom" data-start="{opacity: 0, right: '-200px'}" data-end="{opacity: 1, right: 900}" data-delay="900" data-time="450">volcom</div>
<div class="gk-guitar" data-start="{opacity: 0, right: '-200px'}" data-end="{opacity: 1, right: 0}" data-delay="900" data-time="450">Guitar</div><a href="#" class="gk-ticket" data-start="{opacity:0, top: '45px'}" data-end="{opacity:1, top: 0}" data-delay="1300" data-time="450"> <strong>BoomBoom Bikini</strong> <small>Fashion Show</small> </a>
</div>
</div>
the following is in the css override file
.gk-animation .gk-guitar{z-index:0;}
.gk-animation .gk-volcom{
z-index:2;
}
ok, so let me know,
big thanks,
alan
