Static Full Screen Background Image

Get Started
1

How do you guys accomplish a static full-screen photographic background, that resizes and crops depending on the screen resolution?

I have done some research online. Was just wondering what you guys think or the methods you choose to use.

2

The only way - using css.

body {
background-image: url(images/big_image.jpg);
}

3

haha thats not what I meant

4

I’m no expert, but sounds to me like something done in Flash.

5

Close. You also need to fix the position


body {
	background: url(image/bg.jpg) no-repeat;
	background-attachment: fixed;
}

CSS alone will not resize the image or load different images for different screen resolutions. This can be accomplished with a javascript snippet that detects the screen resolution. CSS 3 adds images scaling and I believe webkit engine now supports this but that still doesn’t select an image by resolution.

That can be accomplished using Javascript. Flash should not be used.

6

Michael, is there a good (free for the download) JS snippet out there that will do this? Maybe a jQuery script?

7

Yeah, I would also like to know which jQuery script you guys recommend. Or any JavaScript script for that matter.

Thanks

8

None that I know of. But this is pretty basic stuff.


<html>
<head>
	<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
	<script type="text/javascript">
		function swapBackground() {
			h = $(window).height();
			w = $(window).width();
			
			$('body').removeClass('small medium large');
			
			if ( h > 700 || w > 700) {
				$('body').addClass('large');
			} else if ( h > 400 || w > 400 ) {
				$('body').addClass('medium');
			} else {
				$('body').addClass('small');
			}
		}
		$(document).ready(function(){
			$(window).bind('resize', swapBackground);
			
			swapBackground();
		});
		
	</script>
	<style type="text/css">
		.small {
			background: #f00;
		}
		
		.medium {
			background: #0f0;
		}
		
		.large {
			background: #00f;
		}
	</style>
</head>
<body>
Hello World.
</body>
</html>

The script above changes the class of the body depending on the size of the window. For demo purposes I simply assigned different colors to the sizes.

Scaling the image to the background requires CSS 3 properties not yet supported in all browsers, but the script about will do the task of changing the image (and the sizing css as needed) based on the window size.

9

You can use this:

http://www.buildinternet.com/project/supersized/

I used it on this site :
http://ryanvillapoto2.com

or check out other methods on http://css-tricks.com/perfect-full-page-background-image/

10

There is a clean method of doing it without JavaScript though it’s a bit unsemantic (but at least it’ll work for everyone). What you could do is add an IMG element on the page with the image and set the width and height attributes to 100% (with absolute positioning to ensure takes up the full screen size and doesn’t overflow). At that point you simply add a z-index value to the container which has the content of your website to ensure it’s balanced over the top. This website does the same thing and it’ll scale the image in percentages to meet the users resolution. I would probably go with that option because it means everyone will get the scaled image, and it just requires one “out of place” image, which in the grand scheme of thing’s isn’t too bad :slight_smile:

http://www.ringvemedia.com/

11

Yeah that is exactly what I’m looking for. I’ll give this a shot and let you know how it goes.

Thanks a lot guys.

12

Here are some more, just for the record, although, as Alex said, it’s a risk using JavaScript:

http://growmedia.ca/blog/2009/10/14/resizable-full-browser-background-image-with-jquery-preserving-aspect-ratio/
http://www.aaronvanderzwan.com/maximage/
http://www.search-this.com/2008/06/17/nicely-fitting-background-images/
http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html

13

ralph: Hence why my solution doesn’t use any JavaScript, it’s clean and (apart from some grey semantics) perfect for the purpose. :slight_smile:

14

Yes, it’s a clever solution. I helped a graphic designer use that code for another site last year, recommending it over the js versions. Still, it’s nice to know your options.

15

My understanding of the original question was they wanted to switch images entirely for different resolutions. CSS alone can’t do that.

16

How do you guys accomplish a static full-screen photographic background, that resizes and crops depending on the screen resolution?

To me, a static image doesn’t “swap out”… he just wanted a single image which scales to meet the browser window.
And his response seems to back that up when he said my solution was what he was after (so I guess it was). :slight_smile: