Home/ Questions/Q 7808017
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T03:01:50+00:00

I’m attempting to use backstretch inside a division. I’ve figured out how to do

  • 0

I’m attempting to use backstretch inside a division. I’ve figured out how to do that here but the width of the image is still stretching to fill the entire body. Is there a way to control the backstretch image so that it fills the height and width of the division and not the entire body? (The division is fluid, or otherwise I’d use a static background image.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    *Edit: Since I wrote this I’ve stopped using backstretch on normal settings because it doesn’t seem to work at all well on Android smartphones or when tablets have their orientation changed. However, this modification explained here still works great, so if you want a fixed height version read on- I’ve attached the JS below, the HTML is;

    <body>
    <div id="backimage"></div>
    </body>

    Here’s a link to the JS file -> http://www.mcnab.co/backstretch.js

    I wanted to use backstretch to fill an element which was full width but took up only the top 560px of the screen. And if the image had to be resized larger than the original it didn’t recenter vertically but was offset so the top disappeared.

    Yes, the link above is correct, you change the container from the body to the element you want to fill, in this case it was #backimage

     // Append the container to the #backimage, if it's not already there
  if($("#backimage #backstretch").length == 0) {
     $("#backimage").append(container);
  }

    Then I changed the code to assign a fixed height css to the image loaded rather than 100%;

    // If this is the first time that backstretch is being called
   if(container.length == 0) {
       container = $("<div />").attr("id", "backstretch")
                   .css({left: 0, top: 0, position: "fixed", overflow: "hidden", zIndex: -999999, margin: 0, padding: 0, height: "560", width: "100%"});
    } else {
       // Prepare to delete any old images
        container.find("img").addClass("deleteable");
    }

    To achieve this the _adjustBG method has to be changed quite a bit. First of all you need to give the imgWidth and imgHeight variables a global scope. Remove them from 

    var self = $(this);

    and add them to 

    rootElement = ("onorientationchange" in window) ? $(document) : $(window), 
imgRatio, bgImg, imgWidth, imgHeight, bgWidth, bgHeight, bgOffset, bgCSS;

    Finally I rewrote a chunk of the _adjustBG method to use the imgWidth and imgHeight rather than have it all basedon the detected browser width and height. 

    function _adjustBG(fn) {
    try {
        bgCSS = {left: 0, top: 0}
        bgWidth = rootElement.width();
        bgHeight = bgWidth / imgRatio;  

            if( bgHeight <= 560 ) {

                bgHeight = 560;
                bgWidth = 560 * imgRatio;

                bgOffset = ( bgWidth - rootElement.width() ) / 2;
            if(settings.centeredY) $.extend(bgCSS, {left: "-" + bgOffset + "px"});                      

            } else {

                bgHeight = (rootElement.width() / imgRatio);
                bgWidth = rootElement.width()

                bgOffset = ( bgHeight - 560 );
            if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});   

            }

        $("#backstretch, #backstretch img:last").width( bgWidth ).height( bgHeight )
                                                .filter("img").css(bgCSS);
    } catch(err) {
        // IE7 seems to trigger _adjustBG before the image is loaded.
        // This try/catch block is a hack to let it fail gracefully.
    }

    // Executed the passed in function, if necessary
    if (typeof fn == "function") fn();
}

    };

    It’s working great for me, and I hope this helps somebody else. If anyone comes by here and has any comments on how I could have done it better then I’d be happy to hear them.

    Cheers,

    Robbie.

    • 0