After the document loads, I am trying to center an image on the browser screen. However, the challenge is that my document's width is larger than the height of the browser, making it difficult to center the image vertically in relation to the document or browser height.
I need a solution to centrally position an image on the browser screen when fullscreen, even if the document is opened when not in fullscreen mode.
Here is what I attempted:
<script>
$(document).ready(function() {
var docheight = $(window).height();
var logopositionheight = docheight/2;
var docwidth = $(window).width();
var logopositionwidth = docwidth/2;
$('#welcome_logo').css({position: 'absolute'});
$('#welcome_logo').css({top:logopositionheight-150});
$('#welcome_logo').css({left:logopositionwidth-500});
});
</script>
I also tried changing $(window) to $(document), but neither approach worked due to the aforementioned limitations.