Grow your CSS skills. Land your dream job.

Help with Background problem

  • # July 12, 2013 at 7:15 pm

    Hello,

    I know this is probably not a unique problem but I’ve read quite a few css tricks and forums and tried some approaches but nothing is working for me. =(

    So I have a background I’m drawing out… I’ve saved it as 1440px by 900px as this seems to be a good resolution to save it as according to quite a few sites.

    Now i’ve set it as my background to try to be responsive to window size using

    background-size: 100% auto
    background-attachment: scroll;

    (i’ve also tried contain and cover)

    But in my MacBook Pro with a resolution of 2880 by 1800, in Firefox the bottom part of the image is chopped off. In Chrome on a Standard window it looks okay… but a bit of resizing and although the width is maintained, the height either is chopped off or there is a black bar underneath.

    What’s the best way to handle this? I’m trying to achieve an effect of the background like in the secret garden party site (http://www.secretgardenparty.com/) but I’m failing miserably. =( Help?

    My site is http://www.liamescario.com/

    Thanks for any tips!

    # July 12, 2013 at 7:29 pm

    Cutting off–That is expected behavior. Image needs to be proportional to it’s width, otherwise it would look squished.

    # July 12, 2013 at 7:49 pm

    Hi Alen,

    I understand that clipping prevents distortion from being stretched or otherwise, but I noticed on the secretgardenparty site i referenced above the background image is never clipped and still proportional.

    I know that site is in Flash, but to achieve the same thing in HTML, I’m not sure if i need to have different background image sizes and maybe switch between them? Or if there is a better way….

    # July 12, 2013 at 7:54 pm

    It’s not flash. And it’s clipped. Background is set via JavaScript.

    Here’s the image: http://cloudfront.secretgardenparty.com/assets/images/common/sgp_bg_2013_dmp01_v37.jpg

    And here’s the JavaScript: http://cloudfront.secretgardenparty.com/assets/js/app-min.1372878718.js

    Open JS file and search for `sgp_bg_2013_dmp01_v37.jpg`

    # July 12, 2013 at 8:32 pm

    Blimey. Shows how much I know. =(

    So all the magic resizing is done here:

    function (k) {
    var q = k(“#backstretch”),
    n = config.cdnUrl + config.rootUrl + “/assets/images/common/sgp_bg_2013_dmp01_v37.jpg”,
    c = config.cdnUrl + config.rootUrl + “/assets/images/common/sgp_bg_2013_dmp01_v36_NIGHT.jpg”,
    o = (“onorientationchange” in window) ? k(document) : k(window),
    f = 1500,
    a, r, b, m, l, g, p, j;
    if ((navigator.userAgent.match(/iPad/i))) {
    n = config.cdnUrl + config.rootUrl + “/assets/images/common/sgp_bg_2013_dmp01_v36_IPAD.jpg”;
    c = config.cdnUrl + config.rootUrl + “/assets/images/common/sgp_bg_2013_dmp01_v36_IPAD_NIGHT.jpg”
    }

    function e(x) {
    try {
    var u = 0,
    v = 0;
    var s = {
    left: 0,
    top: 0
    };
    a = o.width();
    r = a / b;
    if (r >= o.height()) {
    bgOffset = (r – o.height()) / 2;
    k.extend(s, {
    top: “-” + bgOffset + “px”
    });
    u = bgOffset
    } else {
    r = o.height();
    a = r * b;
    bgOffset = (a – o.width()) / 2;
    k.extend(s, {
    left: “-” + bgOffset + “px”
    });
    v = bgOffset
    }
    q.width(a).height(r);
    q.find(“img”).width(a).height(r).css(s);
    var w = {
    scale: a / m,
    bgLeft: v,
    bgTop: u
    };
    k(window).data(“backgroundData”, w);
    k(window).trigger(“bkg_resized”, w)
    } catch (y) {}
    if (typeof x === “function”) {
    x()
    }

    >

    # July 12, 2013 at 8:37 pm

    Not that I know what that means.. but hopefully I can just copy the function e(x) and set o as my background image or something like that and just hope it works. =)

    # July 12, 2013 at 8:57 pm

    Chrome DevTools is you’re friend :)

    # July 13, 2013 at 5:35 pm

    Give me a 100 years and I wouldn’t make heads or tails of that Javascript… whatever is going on there, it looks pretty clever!

    After trying a few other things that make a bit more sense for me, the approach i think I’m happiest with is this (which i got from this site anyway):

    html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    It’ll do! =)

    The one thing I noticed is that the aspect ratio of the secret garden party site is 16:9 (1920px × 1080px), whereas I’m drawing my background at 8:5 (1440px × 900px). Although playing with the 16:9 aspect ratio seems better on my Macbook and iPad, I’ve read in various places that the 1440px x 900px is the recommended size to suit most platforms without compromising on bandwith. Maybe just my 15″ Macbook Retina and iPad are the exception…

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".