Flexible Scalable Background Image

20 May 09

UPDATE – This article is now out of date. Please read up on the latest version of this technique over at The Flexible Scalable Background Image, Redux.

When I get Photoshop comps from designers to build in HTML, CSS and Javascript, there are inevitably some elements of the designs which work well in ~~the Ivory Tower of~~ Photoshop, but present unique challenges when translating those elements into code a browser can work with. One such element on a project I recently completed featured a fixed size content area layered over background image that took up the entire browser window. The comp looked something like this:

MediaConcepts Corporation

The most striking aspect of the design, I think, is the full-window background image. When thinking about how to implement it, I considered what the client wanted as well as how I thought it should behave. When I combined those, the requirements I listed out for it seemed a bit daunting. It would have to…

Fill up the browser window, regardless of the window size.
Maintain the aspect ratio of the image (so it doesn’t distort like in a funhouse mirror).
Resize with the browser window as the window got bigger.
Maintain a minimum size that it would not shrink beyond.
Remain centered.
Not cause scrollbars.
Not be in the HTML as an <img /> element.

Now, I know this ground has been tread before, but the solutions I came across didn’t fulfill all of the requirements I needed. There was no way CSS was going to do it alone, even if I used CSS3’s ~~mythical~~ marginally supported background-size property.

The Basics

Let’s consider my last requirement first: Not be in the HTML as an <img /> element.

Since the image is a supporting design element, rather than integral to the content on the page, this was an important consideration. I didn’t want the template HTML to be cluttered up with a big image which wouldn’t make sense if you were to view the page with, say, a browser on a mobile phone. It would have to start with a background image on the <body> element. I began by setting up the screen CSS with a definition like this:

body {
margin: 0;
padding: 0;
background-image: url(img/bg_page_default.jpg);
background-position: top center;
background-repeat: no-repeat;
background-color: #333;
/* This next one is for IE6 */
background-attachment: fixed;
}

For the project, I decided that the background images would be sized to 1280×960. With that CSS definition above, if you look at the site with a monitor that has that resolution or smaller, you’d see the image fill the window, remain centered, not cause scrollbars and basically fulfill all the requirements I listed above. All would be well.

But what if your monitor is bigger? What if it’s wider, taller or both? In that case, if you were to expand your browser window beyond 1280 pixels wide or 960 pixels tall, you’d see the dark grey background color, and that’s no good, because it would violate my first requirement: Fill up the browser window, regardless of the window size. It ends up looking something like this:

MediaConcepts Corporation

Clearly, we’re falling short so far.

Enhancing it for the Big Screen

To reiterate my 3rd and 4th requirements:

Resize with the browser window as the window got bigger.

Maintain a minimum size that it would not shrink beyond.

For simplicity’s sake, I decided that the minimum image size for the background would be the native size of the image itself (in this case, 1280×960 pixels). With the window any smaller than that, you’d see a portion of the image. It wouldn’t resize, and it would remain centered.

As the window gets bigger then that on one or both axes, though, we have to stretch the image to fill the available space. Since we can’t do that reliably with CSS yet, a different approach needs to be taken. I needed some Javascript to fill the void. Armed with it, I would:

Grab the URL from the background-image property on the <body>.
Use that URL to create an <img /> element which I’d then append to the <body> element.
Hide the new <img /> element when the browser window is smaller than the image.
Show the new <img /> element when the browser window is either taller or wider than the image.
Set the new <img /> element to either 100% wide or 100% high (but not both!), as necessary, to maintain the aspect ratio.

In order to take care of steps 3, 4 and 5, I opted to use some CSS to do that rather modifying CSS properties directly on the generated <img /> element, so I set up some definitions like so:

img#expando {
padding: 0;
margin: 0;
position: absolute;
display: none;
z-index: 1;
-ms-interpolation-mode: bicubic;
}
.wide img#expando,
.tall img#expando {
display: block;
}
.wide img#expando {
width: 100%;
height: auto;
}
.tall img#expando {
width: auto;
height: 100%;
}
.ie6fixed {
position: absolute;
top: expression((ignoreMe = document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop) + 'px');
}

Now, with those definitions, I can simply toggle a wide or tall class name on the <body> element to hide and show the generated image, as well as determine whether it should stretch horizontally or vertically. I’ll set up a Javascript function to execute when the window gets resized which does the calculation and applies the necessary class name to the <body> element.

As an aside, if you’re curious about the -ms-interpolation-mode: bicubic property, that’s in there to keep the image from looking, as Ethan puts it, janky in IE7 when it’s resized. You can peruse the geeky details on MSDN.

I think it’s important to point out that the first 2 steps above respect my first requirement – not be in the HTML as an <img /> element. Because we’ll use the URL of the <body>’s background image to create a new image element on the fly with Javascript, the image won’t be appended to the page if we don’t have Javascript available or our CSS doesn’t define a background image on the body, as might be the case if you had CSS files for alternate environments, like mobile phones for instance.

One detail I didn’t list out is that in order to respect my not cause scrollbars requirement, I’d have to wrap the generated image with a <div></div>. I’ll set that wrapper <div></div>’s width and height to 100% of the browser window’s width and height and apply an overflow: hidden to it, which will crop the image and prevent scrollbars from appearing. I’ll take care of this in the Javascript, as I only need to set those styles when the wrapper and the image are created.

Where it All Comes Together

So here’s a version of the script I came up with that pulls together all that functionality in its entirety:

var flexiBackground = function(){
/**
CONFIGURATION:
Define the size of our background image
*/
var bgImageSize = {
width : 1280,
height : 960
};
/**
Declare and define variables
*/
var $window,
$body,
imageID = "expando",
tallClass = 'tall',
wideClass = 'wide',
$bgImage, $wrapper, img, url, imgAR;
/**
Are we dealing with ie6?
*/
var ie6 = ($.browser.msie && parseInt($.browser.version, 10) <= 6);
/**
Set up the action that happens on resize
*/
var resizeAction = function() {
var win = {
height : $window.height(),
width : $window.width()
};
// The current aspect ratio of the window
var winAR = win.width / win.height;
// Determine if we need to show the image and whether it needs to stretch tall or wide
if (win.width < bgImageSize.width && win.height < bgImageSize.height) {
$body
.removeClass(wideClass)
.removeClass(tallClass);
} else if ((win.w < bgImageSize.width && win.height >= bgImageSize.height) || (winAR < imgAR)) {
$body
.removeClass(wideClass)
.addClass(tallClass);
// Center the image
$bgImage.css('left', Math.min(((win.width - bgImageSize.width) / 2), 0));
} else if (win.width >= bgImageSize.width) {
$body
.addClass(wideClass)
.removeClass(tallClass);
$bgImage.css('left', 0);
}
// Need to fix the height of the wrapper for IE6
if (ie6) {
$wrapper.css('height', win.height);
}
};
return {
/*
Sets up the basic functionality
*/
initialize : function() {
// No need for any of this if the screen isn't bigger than the background image
if (screen.availWidth <= bgImageSize.width || screen.availHeight <= bgImageSize.height) {
return;
}
// Grab elements we'll reference throughout
$window = $(window);
$body = $('body');
// Parse out the URL of the background image and drop out if we don't have one
url = $body.css('background-image').replace(/^url$("|')?|("|')?$;?$/g, '') || false;
if (!url || url === "none" || url === "") {
return;
}
// Get the aspect ratio of the image
imgAR = bgImageSize.width / bgImageSize.height;
// Create a new image element
$bgImage = $('<img />')
.attr('src', url)
.attr('id', imageID);
// Create a wrapper and append the image to it.
// The wrapper ensures we don't get scrollbars.
$wrapper = $('<div></div>')
.css({
'overflow' : 'hidden',
'width' : '100%',
'height' : '100%',
'z-index' : '-1'
})
.append($bgImage)
.appendTo($body);
// IE6 Doesn't do position: fixed, so let's fake it out.
// We'll apply a class which gets used in the CSS to emulate position: fixed
// Otherwise, we'll simply used position: fixed.
if (ie6) {
$wrapper.addClass('ie6fixed');
} else {
$wrapper.css({
'position' : 'fixed',
'top' : 0,
'left' : 0
});
}
// Set up a resize listener to add/remove classes from the body
$window.bind('resize', resizeAction);
// Set it up by triggering a resize
$window.trigger('resize');
}
};
}();
$(document).ready(flexiBackground.initialize);

Yes, yes, it’s using jQuery to help smooth out some of the rougher areas of Javascript like event handling and reading the CSS properties of elements, so if you’d like to use it as is, be sure to include jQuery on any page that uses this script as well (If you prefer, the script can fairly easily be ported to utilize a different framework or, with a little extra effort, none at all).

The project I’ve been referencing throughout this post is using a version of this script successfully – take a look at it in context. You can also take a look at a working example or download the script for your own use. Make sure that you include the CSS definitions above!

A Word of Warning

The resizeAction() method gets tied to the resize event on the browser window. Most browsers fire the event repeatedly as you resize a window, giving you a smooth transition between when you see the <body> background image and the generated stretchy <img />. Some browsers, however, wait until after you’re done resizing to fire the event, giving a decidedly ugly transition between the two. The most notable offender is Firefox and other Gecko based browsers. This is a long standing bug, going back to the Netscape 4 days(!), and it looks as if the Mozilla team has finally fixed it in the upcoming Firefox 3.1/3.5 release.

In Parting

If you’ve found this useful, I’d love to hear your thoughts on how it could be improved upon and any ways you take it and make it your own. Either leave a comment or email me.

Comments

Guillermo says:
21 May 2009 ∞

This seems like a solid solution. Can’t wait to try it out.

Marc Amos says:
21 May 2009 ∞

REALLY nice example here, Mike. Great work, and thanks for documenting it so clearly.

Mike Kitchens says:
31 May 2009 ∞

Great solution for IE, but the latest Firefox really doesn’t like this at all. It places the image on-top of the content, unfortunately…well, at least the way I implemented it. Of course, I’m trying to use it with a vBulletin install, so that may be the issue. Unfortunate. Also, I can’t seem to get it to expand height wise. It doesn’t resize to the entire screen. :(

Michael Bester says:
1 June 2009 ∞

@Mike: I see – that was a z-indexing problem that I had in there. I’ve updated the script to set the generated background image with a negative z-index. It should now ensure that the background stays behind the content, not in front of it, as was happening in Firefox.

Grab the script again, and you should be good to go.

A word of caution, though: Firefox 2 doesn’t support negative z-indexing, so if you’re supporting that browser, you’ve been warned! It shouldn’t be much of an issue now, though, almost all Firefox users are using FF3 by now.

bradleysnider says:
22 June 2009 ∞

Thanks you saved the day!

John Rogerson says:
23 June 2009 ∞

This looked a great and elegant solution to the semantically problematic solution of having to add an <img…> to your markup. However, I discovered that your method breaks if content is longer than the viewport. Essentially, the background image stops scaling at the bottom of the viewport when you scroll beyond that point to view the rest of your content. Seemed to be consistent cross browser too. Is this something you overlooked or is there something I haven’t taken into account? Sorry, but I haven’t got an example to demonstrate this (private dev server), but it should be pretty simple to replicate.

John Rogerson says:
25 June 2009 ∞

Beautiful, works like a charm. I was transfixed on background-attachment being the root of this problem; didn’t take into account the wrapper.

meylo says:
30 June 2009 ∞

Is it possible to randomize the background img using this method?

NYcc says:
8 July 2009 ∞

Apologies if this is super basic… I’m not the most advanced.

I’ve been able to set randomized background images and to use what you did to have a scalable background image (thank you!). But when I try to combine the two – disaster strikes. Is there a painfully obvious way to have both a randomized, scalable background – that I am just missing?

meylo says:
8 July 2009 ∞

@Michael Bester – thanks I see what I can dig up for that…

sonambvlo says:
30 July 2009 ∞

thanks for this, 1st time having to do this in html (i usually work in flash)

Jonathan Miller says:
3 August 2009 ∞

None of the examples I see here on your post work. I checked them with Safari 4 and FF3, no luck. I tested it locally as well. It looks like there is an error here: <code>var $window = $(window),</code>

Jonathan Miller says:
4 August 2009 ∞

I’m still not seeing the effect work. I made sure jQuery was loading, which incidentally fixed the error with the window, but still no luck.

I viewed the source of the page as it was running and noticed that the wrapper div and the image had not been added to the page by the script. For whatever reason it is failing to do this for me.

George says:
7 August 2009 ∞

Hi Michael,
Is it possible to toggle though different background images with “previous” & “next” <a href> tags without using php? Or would I need to place the image in the HTML? I have some experience with java but almost no experience with JQuery.
Here’s an example of what I’m kind of going for:
http://www.thereevesagency.com/work.php?id=1

John Rogerson says:
12 August 2009 ∞

This is a strange one. This could be just an issue related to the site I’m working on and not general but here goes: on the Mac platform, cross browser, everything works fine. However, on Windows, cross browser (!), I came across an issue where my square image (1024×1024) would not stretch at screen resolutions above 1024×768 (this is usually the screen res I’ve got set in my Virtual environment). Going by Firebug et al, the script simply wasn’t firing and the relevant classes weren’t being attached to <body> etc. I only came across this when I saw the site in a 1280×1024 environment. I eventually whittled down the dimensional settings in bgImageSize to 680×680 (but leaving the actual image file untouched at 1024×1024), to where it seemed a multiple of screen resolutions would work (e.g. 1152×864, 1280×720, 1280×768 … 1280×1024). Due to time constraints and questions of sanity I wasn’t really able to test various viewports within these resolutions, but a couple of quick resizings here and there seemed to come out ok. So, this may be the source of the issues that Jonathan may have been having earlier. Dunno if there’s a solution to this beyond the sizing hack I came up with, but would be great to know if there’s a script based solution.

zach says:
17 August 2009 ∞

How can I use this script, but add the logic of random images being generated for each page?

Michael Bester says:
17 August 2009 ∞

@Zach — Please have a look at my earlier comment.

zach says:
25 August 2009 ∞

What image size should we be using?

cstewz says:
8 September 2009 ∞

Hi Michael,
I’ve been looking for a solution to this design element for a little while now and think this solution is fantastic. Nice work, I’ll be sure to give you a mention when my designer throws this kind of design my way.

Will says:
17 September 2009 ∞

Thanks for this solution. When it works, it works beautifully.
However, I noticed the same bug that John did. Across all browsers on this PC I found that the script simply isn’t firing on the provided examples. Tested it on a Mac, and it works just fine. I tried the same img resizing hacks without much/any success. Ideas?

Dave Wilson says:
19 September 2009 ∞

Okay, I’m really new at this stuff, where exactly do I put this? Do I paste it into a new .js file that I reference in my HTML body tag or do I add it as a script element before my body tag? I must be doing something wrong cause it’s not working for me. I’ve added the background-image tag to my CSS file and the image loads into my page but it doesn’t resize at all. I“m on a 1280×1024 screen so I’m using an 800×600 image to test it out and the image is tiling in my test file.

You can see here http://www.secondsightstudio.com/indextemp.html

Any help would be great as I’d love to use this to set my backgrounds for my various pages but I’d also like a way to set up a gallery to navaigate from image to image in the same way George requested.

Thanks!

Oleg says:
30 September 2009 ∞

Nice posts there – thank’s for the interesting information.

Private Myspace says:
30 September 2009 ∞

thank you for posting this

Gard says:
1 October 2009 ∞

Excellent posts, thank’s.

You're the Man...quick question says:
5 October 2009 ∞

Hey thanks for this…I’ve been pulling my hair out trying to figure this out. Now it is resizing in my browser but the bottom part of my 1280×960 background is not showing. It is showing about 80% of my background…any ideas on what I am doing? I copied your code word for word. Thanks for any help.

madesign says:
9 October 2009 ∞

Your solution do not work with Safari 4.0.3.
I am looking since a wile for a way to add a flexible BG image but it seams its difficult to find a solution which works with most and older browser like IE6

Saludos, Michael

madesign says:
9 October 2009 ∞

Hello Michael,

i use Safari in Snow Leopard and both the context example and the working example do not work. I use a MacBookPro with screen 1440 px x 900 px.

Saludos, Michael

madesign says:
9 October 2009 ∞

Just realize you took the screens with Safari.
I can send you a screen if you wanted but both backgrounds are fixed image with a grey background left and right.

Michael

madesign says:
9 October 2009 ∞

Just test it also in Firefox 3.5.3 with the same result.
Only a static background image.

Michael

Mike Cutter says:
11 October 2009 ∞

Hi Michael, further info, I was initially getting a static bg image in Safari 4.0.3 (on 10.5.8 in my case) for both your example page and the live site. I then loaded the javascript file to have a look (for the example page), and then went back to the page (literally just hit the back button), and it’s suddenly working, including subsequent reloads. ???

Lorissa says:
13 October 2009 ∞

Thank you for this! It was just what I needed and worked like a charm. Excellent stuff.

seb says:
13 October 2009 ∞

Perhaps a little bit of a long shot, but I needed to fix a similar issue in a webpage I was recently creating.

Unfortunately I believe I can’t use your solution since what I wanted to do was to be able to scroll multiple background images in the background, similar to what is done on www.webtalents.pl

When I set an img to fixed or absolute, then it no longer can scroll, and I need to set them to that in order to use height/width…

I explained the issue better here: http://stackoverflow.com/questions/1554899/resize-background-image-to-fill-the-page-height-wise-but-allow-elements-on-eithe

Any ideas? It looks like I’m going to need to wait for various CSS3 features, and in the meantime just use a selection of pre-resized images. Very annoying!

Dave Wilson says:
15 October 2009 ∞

Hey Michael, thanks for that! I’ve got it working now and it’s pretty sweet. I do seem to have a similar issue to what you’re the man is having but I beleive it’s just a resolution issue. I have my image set to 640×480 so that elements on my background will hopefully work better during resizing. When my browser is maximized a good chunk of the bottom of the back ground is below the bottom of the browser window. This is due to maintaining the aspect ratio of the image. Again, not being very code headed, how would I change it up if I DID want 100% fill on height and width regardless of distorting my image so that the entire image is always visible but filling the screen?

Thanks Michael.

Adam Hays says:
23 October 2009 ∞

testing this in IE but doesnt seem to be working? website is longshots-bar.com

Sergey says:
3 November 2009 ∞

good code.

Dan McCreedy says:
11 November 2009 ∞

Thank you for taking the time to share your excellent work. I am trying to catch up from the HTML days of 2001. I have been imagining this concept in my mind yet do not have the proper training. This information has opened the door for me.

mindesign says:
16 November 2009 ∞

Currently building my website and needed this EXACT example solution.
Been in publication field for last 5 years and attempting to grasp the web media field as a recent layoff has demanded it.
I an truly grateful for your charity and best intentions.

Michael says:
16 December 2009 ∞

Great post..thanks a lot! I’d like to have the background image be randomized on refresh of the page. You mentioned in a previous comment that one could randomize the background-image property on the body element in the CSS… could you explain this a bit further? Thanks!

Michael says:
18 December 2009 ∞

Nevermind…I figured it out. You can see it at http://www.slavagoh.net

jorre says:
3 January 2010 ∞

For some reason I keep getting the following error:

Error: $body.css(“background-image”) is undefined

My background-image is set correctly as it displays on screen, I have no clue why this isn’t working. I’m using the latest jquery version.

Any ideas?

jorre says:
3 January 2010 ∞

the script needs to be at the bottom of the page… sorry for that ! Great script!

Ashur says:
12 January 2010 ∞

Hi,
This is by far the best solution that I’ve stumbled on, when it comes to flexi backgrounds. Could it be possible to add resolution detection to the code, so that e.g for a user with a resolution of 1024×768 > the script would offer an optional image? (Yes, I know the idea of the script is that the bg scales down, but I have an image that does not show as planned, when scaled down too much.) I would be greatfull for an answer.

Ashur says:
12 January 2010 ∞

This is by far the best solution I have stubled on when dealing with flexi backgrounds! I was just wondering that could it be possible to edit the code so that the script would seek up the user’s resolution and offer an optional image depending on screen width?(E.g if the user works with 1024×768, he would be given a diffrent bg than other users). I know the idea of the script is to scale, but I have a bg image that doesn’t work when scaled down too much (to a 1024 res.). Hope you could help..

Dan says:
28 January 2010 ∞

I have tried writing my own script to do this and it always seemed to distort the image, well done.

Moreno says:
8 February 2010 ∞

Awesome code! Thank you SO much.
How’d you get the content area transparent? Did you float the white background divs around it or?

Joel says:
10 February 2010 ∞

I tried this solution with no luck. Like some of those above, the script is not inserting the image. I’ve purposely resized the image to much lower than my screen resolution and updated my css to match yours. I’m not sure why it isn’t working, I’ve tried everything. Any ideas?

FF3.6 on Win7, running locally.

David says:
12 February 2010 ∞

Such a great solution to a problem I have and want to solve- but a solution I can’t implement due to the jQuery. We can modify the CSS and add javascript, but can’t include jQuery.

David says:
12 February 2010 ∞

O.k. – so Google hosts the jQuery library. So I need to load that.

I believe I did it right, and set the image width & height in the script to be that of the uploaded image. Still no joy on the resizing….

Michelle says:
16 February 2010 ∞

Grateful you shared your knowledge. Your code is simple and elegant. Easy to modify and execute. Implemented it here Thanks again! – Michelle

Mike says:
21 February 2010 ∞

I’ve got a weird one for you. It didn’t want to scale, just loaded the full size image. I thought I did it right, so I checked out the off-site demo on mediaconcepts, it did the same thing, just loaded the full size image. Checked out your example and that worked correctly, but then went to look at your code, copied it exactly (renamed the image). Same problem of loading the full size image. Went back to your on-site demo, and it didn’t work for me anymore. Just loaded the full size image. I’m guessing it may be a cache problem, w/ my computer or something w/ my setup, but I can’t seem to figure out the issue. I had the same problem in all my browsers, latest versions of IE, FF, and Chrome. Maybe a Windows 7 issue? Feel free to email me if you have any questions.

Mike says:
22 February 2010 ∞

1680 X 1050 on my second monitor. (21” samsung). I messed around w/ it a little more, and it seemed like it works if I configured the image size in your script to a size or ratio smaller than the actual image size. I have a URL where I got that to work if you want to see it, but the resizing is a bit weird. It may be my image, a more square image on widescreen (w/ no scroll bars) .

Mike says:
23 February 2010 ∞

1680 X1050. Not sure what it is, but I messed around w/ it and if I set the image size in your script to something smaller than the actual image it will scale, but not if I set it to the exact image size. It looks a little weird, since I’m using a landscape-ish that is more square and my displays are widescreen. I guess image selection for the BG is pretty important.

Ronald says:
26 February 2010 ∞

Script works very well in Firefox and Safari. Thanks! This was what I was looking for. Unfortunately in IE8 the image (1680×900) is not expanding over the full width of the screen. Any ideas ?

Ronald says:
26 February 2010 ∞

Forget my question. I had a conditional IE comment switched on. It now works great!

Dany says:
25 March 2010 ∞

You saved my life, Thanks a lot

Gerry says:
30 March 2010 ∞

You’re still the man, buddy. Great stuff!

oliver dalton says:
14 April 2010 ∞

nice tut – just a shame my screen is 17” how are people meant to develop for huge screens and test when most web developers develop on 15 – 17” screens

brent lagerman says:
25 April 2010 ∞

thanks for this, and kimili !

One quick question, would it be easy (or even possible) to have the the browser bottom align the background so that as you size your browser smaller the image would disappear off the top of the screen instead of the bottom? I have a specific design that needs that (unless I can talk the someone into changing it a bit)

thanks,

b r e n t
@
mimoYmima.com

brent lagerman says:
25 April 2010 ∞

also one more question, how can I use jquery no-conflict with this? Since you have the document ready handler at the bottom, not spanning the entire script I haven’t had luck with it, here’s what I’m changing:

// DOCUMENT READY: uses noConflict for prototype which we use for lightview
jQuery.noConflict();
jQuery(document).ready(flexiBackground.initialize);

brent lagerman says:
25 April 2010 ∞

nevermind, it looks like just wrapping the entire script in the no conflict ready handler fixes the problem I was having. Thanks again.

brent
@
mimoYmima.com

brent Lagerman says:
9 May 2010 ∞

Ok the site I made using your technique went live but still has a minor bug. When the page loads it shows the image at a smaller size for a second before re-sizing it to fill the background. Any idea why? here’s the link:

coco and igor

thanks

br e n t
@
mimoYmima.com

brent Lagerman says:
10 May 2010 ∞

thanks michael, I tried that earlier and it for some reason was making my other scripts not work (the one that relied on prototype) I think I may instead try to hide the background and fade it in or something like that.

brent
@
mimoYmima.com

brent Lagerman says:
10 May 2010 ∞

is there anything easy I could add to this section to hide the image for a few seconds then fade it in:

// Create a wrapper and append the image to it. // The wrapper ensures we don’t get scrollbars. $wrapper = $(’<div></div>’) .css({ ‘overflow’ : ‘hidden’, ‘width’ : ’100%’, ‘height’ : ’100%’, ‘z-index’ : ‘-1’ }) .append($bgImage) .appendTo($body);

Nigel Dennis says:
18 May 2010 ∞

i am using this code and it works GREAT! however, i’m working with a rather large image for my site (1600 × 1600) and if you go to my site, you’ll see the effect it has…when you hit a certain point scaling down…you’ll see. please help! when i change the script to 1600 × 1600 the css and java just do not work at all.

Christoph says:
19 May 2010 ∞

Hi, first of all great tutorial, really helpful and just the hing I’ve been looking for. I just don’t get it to work for me. I looked at all the source codes from your example and the websites which been linked her.

The thing that doesn’t work is the class wide/tall issue, only one of them works? Also is minimal scalesize of the picture not 1200*900px (which is the actuale size of the picture and the size I’ve written in the flexible script) but much smaller.
here is the code is used so far in a sipmle test-file:
<script type=“text/javascript” src=“flexibg.js”></script>
</head>

I hope you can help me with this. I’m not a total html/css noob but my java is not that good as is my english ;-)

Christoph says:
19 May 2010 ∞

lalalal ;-)
got it to work yeaahhh!!!
super sweet, thx a lot

Nathan says:
2 June 2010 ∞

Am I missing something? On my mac using the latest FF and Safari your examples are not working. The centering works, but I see the grey on the outside when I go bigger. Same on my PC running XP and the latest FF and ie6 (bleh to ie6).

Michael says:
2 June 2010 ∞

First i like to thank you for sharing your work:
Yesterday i found your article and the css/js solution – i had a look on http://mediaconceptscorp.com/ and it was working great.
Today i tried to use it with yaml (htlm-css framework) and i failed…
no scaling – but i think that i did it ok
then i had a look at the mediaconcepts side – scaling isnt working there too.

others had that prob too – ill make a restart now

osx 10.5.8 / safari 4.0.5 / firefox 3.6

heres the code and a screenshot
http://codelabor dot ch/example_yaml/01_layouts_basics/
http://codelabor dot ch/mediaconcept.jpg

btw – thanks a lot

michael

Nathan says:
2 June 2010 ∞

Window width: 1430px
Window height: 874px

Viewport width: 1430px
Viewport height: 745px

That is on my mac and slightly bigger on pc. I can email a screen shot if you like.

Nathan says:
2 June 2010 ∞

aaaah wait I think I see. since the height is less than 960, it says forget it as to avoid scrunching or distortion. Right? despite the fact the width is wider? I get it if that is the reason.

Nathan says:
2 June 2010 ∞

sorry to reply again, but on pc the size is
1421×1024 and I side the background color and the image does not stretch

I see it is working for so many wonder why the example not working for me?

Michael says:
2 June 2010 ∞

others had that prob too – ill make a restart now

osx 10.5.8 / safari 4.0.5 / firefox 3.6

heres the code and a screenshot
http://codelabor dot ch/example_yaml/01_layouts_basics/
http://codelabor dot ch/mediaconcept.jpg

Michael says:
2 June 2010 ∞

hi – all examples are working on the old pc – ff3.0.16 and safari 4.04
and don t work anymore on the new one / but yesterday when i bookmarked this article, with the new pc everything seemed ok.
i m wondering like nathan ….

thanks and sorry for the double post

michael

ps: and sorry for my english ;-)

Michael says:
4 June 2010 ∞

Hi all together
This is perhaps usefull for all those which have courious problems with that code and a macbook.
All Problems disappeared when i plugged in my external monitor. As i tested the code with safari developers tools, the screen size which was given back from safari was much too small – this gave me the idea to plug in my external monitor again. Now all examples are working…

thank you kimili for that piece of code

michael

Private Facebook says:
5 June 2010 ∞

thank you for updating the example at a smaller size

Santana Moll says:
12 June 2010 ∞

Great stuff, thank you so much and I love your work!

jane says:
16 June 2010 ∞

hi!

thank you so much for this script. it’s managed to work on my site so far, but when i refresh the page, it only shows the smaller, center-fixed background image that is what i’m assuming the original image loaded before the large image kicks in. if i refresh again, it goes back to the large scalable background. i’m wondering if i’ve done something wrong or if viewing this in firefox is the problem…any help/insight would be appreciated!

jane says:
17 June 2010 ∞

thanks michael, i realized my mistake!

Iztok K says:
7 July 2010 ∞

Great script, nice and light on the browser. Thank you so much!

Pascal Brun says:
7 July 2010 ∞

Hi there
First of all thanks for sharing.. great script!
I want to use this script for iPhone version of my site and had to realise that the script doesn’t seem to work there?!
Any clue?
Thanks again
Pascal

huy says:
7 July 2010 ∞

excellent……thanks for sharing

Harm says:
8 July 2010 ∞

Sounds promising. I’m struggling with the same in a Joomla template.
I’m an amateur though..The part where it all comes together…Is that code to paste in the index.php?

btw: I checked http://mediaconceptscorp.com/ and it does not seem to be implemented there. Am i correct?

Grtz, harm

Pascal Brun says:
9 July 2010 ∞

I actually checked out your work in the iPhone / iPad and it doesn’t work there either.. still craving for a solution :-)
Anyone?
Thanks
Pascal

Manuel Cordero says:
12 July 2010 ∞

Hey great tutorial but I’m having a tiny problem.
I’m a squarespace user so everything is a little weirder and harder with squarespace when trying to achieve customization. Is it possible you could give a few steps on how to implement this great effect using squarespace code injection points and stuff of similar nature? thank you very much

Manuel Cordero says:
12 July 2010 ∞

nevermind i just got it to work thank you very much sir

Manuel says:
12 July 2010 ∞

Yes it works great but now because of being in a squarespace site i have one tiny tiny problem. I can’t figure out how to achieve the multpile background effect on different pages using this code. Is there a possibility you would know how to do this using squarespace’s software?

Andy Smith says:
15 July 2010 ∞

Thank you so much; this is fantastic – and timely as it replaced a Flash background image. We recently discovered compatibility issues with Flash backgrounds and older (non-Intel) based Macs. I have been attempting to use fadeIn for the background image, but have only succeeded in having the resized image fade in on top of the initial background (background-image) attribute for the body tag:

$(function(){
$(’#expando’).hide();
$(’#expando’).fadeIn(5000)
});

Any ideas how I might accomplish this? Thanks so much for the wonderful script!

Andy Smith says:
16 July 2010 ∞

Feeling kind of stupid as the solution was so simple: I placed a fixed div – #bg-screen (100% height and width, background white, z-index of -1) – between my content and the background. This meant changing the $wrapper css to z-index of -2. Then, I fade out the div#bg-screen after the window loads:

$(window).load(function() { $(function(){ $(’#bg-screen’).show(); $(’#bg-screen’).fadeOut(1000) });
});

I figured others might want to use the same technique so I have posted my solution here… Thanks again for the original concept; working like a charm!

Pascal Brun says:
19 July 2010 ∞

Still desperatly searching for a fix of this beautiful script for iPhone/iPad iOS safari brwosers… anyone?
Cheers
Pascal

Dean Verleger says:
22 July 2010 ∞

Michael, you wouldn’t happen to know how to get this working in a WordPress theme would you?

Josh says:
24 July 2010 ∞

@Manuel – How did you get this to work with code-injection points on Squarespace? Could you point out a few hints or a small and to the point tutorial on how you got this to work for your site. I love the transitions you have working for your site. Thanks

Adam says:
26 July 2010 ∞

This has been immensely helpful!

Is there an easy way I can modify the script to choose one image from a set of background images at random on every page load?

Adam says:
27 July 2010 ∞

Thanks. I should’ve done further reading in this transcript before asking you a very popular and answered question.

I do have another strange issue that I don’t think has been covered: on my work network (very fast T1) I have no problem seeing perfect results, but when I take the same machine and browsers off of this network and onto a more average (but still 8mbs download) broadband network, it seems like the script doesn’t load correctly. I can see white bars on both sides of my top/center image. Any ideas about why that would happen or how to fix it?

Pascal Brun says:
29 July 2010 ∞

@ Michael: Thanks for your note! I’ll be tuned for the iOS issue.. you seem to be DA man for this scripting! Thanks again for sharing!
Cheers
Pascal

Drew says:
2 August 2010 ∞

Thanks for sharing your work! I haven’t moved my site to the server yet or I would post a url. When I view your working site the script works and the image is resized. If I download your script and copy your html it works locally also. However, when I add my own images, the lower 30% is not reflected in the browser…even if you scroll. I noticed some other posts expressed the same issue, but I did not see a solution. Thanks again!

Drew says:
6 August 2010 ∞

URL associated with my previous post about the resizing not occurring.

siddhi says:
13 August 2010 ∞

Hi,
Thanks for this tutorial.

But i’m facing problems. Can you please tell me how to add swf file. my swf file is not displaying. background is working really very nice.

Thanks

Pascal Brun says:
30 August 2010 ∞

@Michael: Just wondering if you had any chance to look into the iOS issue? Cheers, Pascal

Ben says:
30 August 2010 ∞

Hey Michael,
Thanks for an awesome script. Used it, but had to make one small change where you check the screen width/height early in the initialize function – shouldn’t it be if screen width AND screen height then return? i.e.

if (screen.availWidth <= bgImageSize.width && screen.availHeight <= bgImageSize.height) { return; }

Thanks again though – great job!

Andrew says:
6 September 2010 ∞

Love this. Thanks so much. One question tho. I have margins on the sides when i try this…I can see the grey background on the sides and I have no idea why. I copied everything and set the bg url to a local image.
Any ideas?

Faheem says:
8 September 2010 ∞

Its good but i am looking some thing like this http://www1.aedas.com/Asia
if you reduse window height, image height is also redused while in your example height is not redusing, in your example when we reduse width its seems like image goes to left and size is same. please help…?

Josh says:
9 September 2010 ∞

Great Script… this is exactly what I needed.
I am having some trouble though.

I am planning on a new design for my website, which is located here:
http://joshwebdesign.com/new

But there is an issue where the background image is not resizing to the browser window. I’ve based it and checked my source code with your example, and I can’t find what the problem is.

Any help would be nice. :)

scottyd says:
11 September 2010 ∞

Pretty sweet!

I am wondering if this method would work as a background image gallery using jquery to fade/cycle between multiple images?

What do you think?

Kenneth White says:
16 September 2010 ∞

For folks having trouble in WordPress, I had to wrap this whole function in the very last noConflict wrapper found here in the Codex.

Replacing “$” with “jQuery” in the DOM calls did not work.

Vinay says:
21 September 2010 ∞

Michael,

I tired this code on one of the websites that I am creating and the I see the tiling effect of the background on higher resolution.
Does the script needs to be embedded in the body of the HTML?
I am new to coding and would appreciate your help!

meghan says:
27 September 2010 ∞

I modified this to scale the image and maintain the ratio and the framing of the image despite any screen resolution, but ended up getting a double image that showed underneath, and nothing I do can make it go away. I tried populating the url from a div tag image (not the body bg image) and then it broke the code, I tried setting the display of the bgimage to display:none, or moving it off screen, but everytime it would move the newly created scalable image, not the unmoving bg image. I could neither target it nor get rid of it. Anyone else had this experience? Any solutions? Suggestions? Thoughts?

http://www.michellemason.net/tester.html

matterata says:
16 October 2010 ∞

thanks for the help, but as I am a total noob at coding I can’t seem to get any divs to float over the background properly, as soon as I put a div on the page, the background image doubles up… as in, there is an image in the main background that scales and then in the background behind the div, sort of splits the page. As soon as a make the position of the div absolute the main background image stops scaling.

Any suggestions? Thanks!

Gorka says:
19 October 2010 ∞

Superb!

This worked perfectly! I actually had a different solution that involved one solution for good browsers and another one for explorer but this works cross-browser without a problem!

I just had one odd issue: I had to add a z-index value of -2 (and position:relative for it to work) to my body tag because it was showing the background image infront of the added img (and changing the z-index of the img to 0 simply showed it infront of everything).

Great work and I’ll definitely credit you for it.

Cheers,
Gorka
http://www.AquiGorka.com

Jim Bills says:
23 October 2010 ∞