Well i've tried adding the following in
HTML INSERTS: HEADER
Code:
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
// Header image auto resize on views resolution
var headerwidth = jQuery("td#header").width();
jQuery("#imagecontainer").each(function() {
var maxwidth = headerwidth + 'px';
var imgwidth = jQuery(this).width();
var imgheight = jQuery(this).height();
var newimgheight = (headerwidth / imgwidth * imgheight) + 'px';
if (imgwidth > headerwidth) {
jQuery(this).css({width: maxwidth});
jQuery(this).css({height: newimgheight});
}
});
});
//]]>
</script>
And in
CSS INSERTS
Code:
#imagecontainer { max-width: 100%; width: auto 100%; height: auto 100%; }
But the header image is not resizing when someone with a smaller resolution views my website. I have a netbook that i've been testing it out on. the image still gets cut off.
The code above is basically from the post i mentioned and after viewing the current code in the header.php i changed it accordingly to what i thought would make it work. I don't know how jQuery works either, but it appears to be checking for what was inputted in for the height/width for the image and the width of the overall layout but my layout is a percentage and not a number... and only the height of the image is a number that was defined within the configuration in
HEADER IMAGE. I'm not sure if it is able to determine the actual size of the image or if it's looking for values that have defined it exactly.
Ultimately if i can get this sorted i'd love to do the same for the background image.
Any help is much appreciated. TIA.