Home/ Questions/Q 6811687
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:21:28+00:00

I recently started a project were I wanted the background image to scale to

  • 0

I recently started a project were I wanted the background image to scale to the size of the window. I was able to make it work with the following code:

<script>
$(window).load(function() {    

        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();

        function resizeBg() {

                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                    $bg
                        .removeClass()
                        .addClass('bgheight');
                } else {
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }

        }

        theWindow.resize(function() {
                resizeBg();
        }).trigger("resize");

});

</script>
</head>
<body>
    <img src="images/ij_background.jpg" id="bg" alt="">
</body>
</html>

The problem is that the background image will load the full size image, and then scale to the window size, which is a little ugly. I want the image to load, scale, and then be displayed with a fade. I became a little stuck since I’m a little new to jQuery. Here is what I have so far.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can load the image hidden, resize it, and then fade it in. This approach requires that JavaScript be enabled on the client (about 98% of people have it enabled, but a noscript fallback for the other 2% might be worthwhile). It would look something like this (live copy):

    // jQuery
jQuery(function($) {
  var theWindow        = $(window),
      aspectRatio,
      // Create img element in jQuery wrapper
      $bg              = $("<img>"),
      // Get the raw element
      bg               = $bg[0];

  // Hide the element, hook its load event, and set its `id` and `src`
  // Important: Hook the load event *before* setting `src`
  $bg.hide().load(bgLoad);
  bg.id = "bg";
  bg.src = "http://www.injurytimeshort.lanewaypictures.com/images/ij_background.jpg";

  // Append it to the body
  $bg.appendTo(document.body);

  // Resize on window resize
  theWindow.resize(resizeBg);

  function bgLoad() {
    // Now that the image is loaded, get its aspect ratio
    aspectRatio = $bg.width() / $bg.height();

    // Resize it
    resizeBg();

    // And fade it in
    $bg.fadeIn();
  }

  function resizeBg() {

      if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
          $bg
              .removeClass()
              .addClass('bgheight');
      } else {
          $bg
              .removeClass()
              .addClass('bgwidth');
      }

  }
});

    Note that we’re no longer waiting for the overall window#load event to fire, we only care that the DOM is ready and that this specific image is finished loading.

    • 0