CODEWITHSUNDEEP
javascriptjquery
SwissChocolate
SwissChocolate

Reputation: 237

(jQuery plugin: backstretch) Margin on the sides

I am using this great jQuery plugin to have the fullscreen backgound for my website. This plugin currently fills the entire background on the screen, I was wondering if it is possible to give it a margin. For instance I want to have a gap in the right side of the screen for 150px (so I can see the body background) and the rest of the page will be filled with backstretch. I have played with _adjustBG function but I can't get this working. Any helps will be appreciated.

Upvotes: 0

Views: 1247

Answers (3)

David Tran
David Tran

Reputation: 10606

Since the author of this plugin didn't make an option for margin, I'll tweak it for you. Below is the modified _adjustBG() function that you may need.

Just open the file "jquery.backstretch.js" (the normal version, not the minimized) then replace the original _adjustBG() function (at the end of file) with this function.

function _adjustBG(fn) {
    var rightMargin = 150; //--- edit the margin value here
    try {
        bgCSS = {left: 0, top: 0}
        bgWidth = rootElement.width()-rightMargin;
        bgHeight = bgWidth / imgRatio;

        // Make adjustments based on image ratio
        // Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
        if(bgHeight >= rootElement.height()) {
            bgOffset = (bgHeight - rootElement.height()) /2;
            if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});
        } else {
            bgHeight = rootElement.height();
            bgWidth = bgHeight * imgRatio-rightMargin;
            bgOffset = (bgWidth - rootElement.width()) / 2;
            if(settings.centeredX) $.extend(bgCSS, {left: "-" + 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();
}

Upvotes: 1

topek
topek

Reputation: 18979

If IE6 is no issue, you can try to put the following in your stylesheet:

#backstretch{
    width: auto !important;
    right: 150px;
}

I tried this on the backstretch homepage and it worked as I would expect. As I am not totally familiar with this plugin please feel free to correct me.

Upvotes: 0

orolo
orolo

Reputation: 3951

Update:

By poking around w/ console, I found that if you subtract 150 from the width of the background-image, it will, by default, give you a margin on the right. You may want to adjust the height so your image scales, but, maybe something like this to run in $(document).ready():

var $bg = $('#backstretch');
var newImgWidth = $bg.width() - 150;
$bg.css('width', newImgWidth);

Upvotes: 0

Related Questions