Z-indeks
HeyMit grafik skal ligge 100% center ovenpå min roterende baggrund.
Hvad gør jeg?
Preben
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Rotating Background Image</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bg_containers').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
<style type="text/css">
body {padding:0; margin:0;}
#content {position:absolute;width:100px; height:100px; margin:0; z-index:2;}
#guitarlogo {position:absolute; top:5px; left:5px; z-index:2;}
/* classes to work with cycle plugin for BG images */
#bg_containers {width:100%; margin:0; z-index:1}
#bg_containers div {width:100%; height:1000px; margin:0 auto;}
#bg_containers .bg1 {background:url(images/b1.jpg) no-repeat;}
#bg_containers .bg2 {background:url(images/b2.jpg) no-repeat;}
</style>
</head>
<body>
<div id="bg_containers">
<div class="bg1"></div>
<div class="bg2"></div>
</div>
<div id="content">
<div id="guitarlogo">
<img src="logo2012orange_alpha.png" width="900" height="338" />
</div>
</div>
</body>
</html>
