Question

What I am trying to do is show a full screen background image on screens that are large enough and it works on most browsers but it is causing problems on others. I ran it through the W3 Validator and it says that XHTML doesn’t support Div and Img tags in document.write. How else would I code this without document.write so that it would pass the validator and not cause errors on some browsers?

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.fullscreenBackground.js"></script>
<script type="text/javascript">
$(document).ready(function () {
        $("#background-image").fullscreenBackground();
    });
</script>

            <script type="text/javascript">
var viewPortWidth = $(window).width();
var viewPortHeight = $(window).height();
if (viewPortHeight >= 300 && viewPortWidth >= 400) {
document.write("<div id='background-image'><img src='BGLarge.gif' alt='background' width='1920' height='1080' ></div>");
}
else {
document.write("");
}
</script>

Answer 1

if (viewPortHeight >= 300 && viewPortWidth >= 400) {
  $('body').prepend('<div id="background-image"><img src="http://thetylerpress.com/new/BGLarge.gif" alt="background" width="1920" height="1080" ></div>');
}

You wont be needing the else statement