For the following code the vertical scrollbar does not seem to scroll down at all to view the text? Any help greatly appreciated. Have tried changing both overflow and positioning but did not work. Maybe an issue with the javascipt possibly? Or maybe a conflict between the css and js? Thanks:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<title>AUTO RESIZE BACKGROUND IMAGE</title>
<script type="text/javascript">
$(document).ready(function() {
$("#triquibackimg").load(function(){
resize_bg();
})
$(window).resize(function(){
resize_bg();
})
function resize_bg(){
$("#triquibackimg").css("left","0");
var doc_width = $(window).width();
var doc_height = $(window).height();
var image_width = $("#triquibackimg").width();
var image_height = $("#triquibackimg").height();
var image_ratio = image_width/image_height;
var new_width = doc_width;
var new_height = Math.round(new_width/image_ratio);
if(new_height<doc_height){
new_height = doc_height;
new_width = Math.round(new_height*image_ratio);
var width_offset = Math.round((new_width-doc_width)/2);
$("#triquibackimg").css("left","-"+width_offset+"px");
}
$("#triquibackimg").width(new_width);
$("#triquibackimg").height(new_height);
}
});
</script>
<style type="text/css">
#triquiback{
left: 0;
top: 0;
position:fixed;
overflow: auto;
zIndex: -9999
}
#triquibackimg{
position:relative
}
</style>
</head>
<body>
<div id = "triquiback">
<img id = "triquibackimg" src = "http://www.lightmedia.hu/hirlevel/sonybmg/foofighters/061124/sajto_2.jpg" />
</div>
<div>
hi
</div>
</body>
</html>
You need to wrap your text in a container which has some kind of positioning (relative should be fine for all purposes), otherwise it’ll stay behind the other positioned element. Here’s an example: http://jsfiddle.net/VkQ67/1/