Use backstretch inside a division AND reduce width to width of division_问答_开发者

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开发者_StackOverflow社区 not the entire body? (The division is fluid, or otherwise I'd use a static background image.)

*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.

I did this much simplier. Look for the ratio in the backstretch.js. It says something like:

"ratio",h/f

I changed it to h/h-1 - after trying a million different formulas. Then I realized this is actually a ratio of zero. So change it to:

"ratio",0

Now the images are sticking at 100% width regardless of the height. I then set some max-width and min-width in css with the @media tag and made sure the content section of the page was always jumping up to ensure no whitespace below the image as it gets smaller. You can see the example here:

http://katjaglieson.com

This took me a whole day lol.

But essentially this is stopping the crazy full screen-ness of backstretch but keeping all the other goodies.