- This topic is empty.
-
AuthorPosts
-
July 12, 2013 at 7:15 pm #46366lee_the_fleeMember
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 #142619AlenParticipantCutting 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 #142624lee_the_fleeMemberHi 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 #142625AlenParticipantIt’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 #142630lee_the_fleeMemberBlimey. 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 #142631lee_the_fleeMemberNot 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 #142634AlenParticipantChrome DevTools is you’re friend :)
July 12, 2013 at 8:59 pm #142635July 13, 2013 at 5:35 pm #142699lee_the_fleeMemberGive 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…
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.