How is foodily accomplishing this background image effect?

I am curious as to how Foodily.com is accomplishing this background effect? (the background is stretched and looks good no matter how the browser 开发者_开发技巧is resized)

http://foodily.com

http://jsfiddle.net/JL3jL/2/embedded/result/

css

img {
  width:100%;
  min-width:1600px;
  z-index:0;
  min-width:100px;
}

html, body {
  height:100%;
  min-width:100px;
}

body {
  margin:0;
  padding:0;
}

Markup

<img id="bg" src="http://foodily.com/images/BG_grapes.jpg"/>

Basically whats happening is they are setting a min-width for the image so it needs to be at least that size, but can grow beyond with width 100%.

What might trip people up is the fact that its not a background-image of an element, but an actual img tag set to display under everything.

It's a 1920 x 1200 image, so that affects how the image looks at different resolutions. After that, the CSS tells the width of img tag to be 100%. So as you stretch the browser, the image makes sure to be 100% of that. They also have a minimum width set to make sure the image doesn't get smaller than 1600px wide.

They keep an <img> extremely large on the background, and stylize it to stretch to 100% of the browser width:

#rotate_bg {
   position: fixed;
   top: 0;
   bottom: 0;
   width: 100%;
   z-index: 0;
}

#rotate_bg img {
   width: 100%;
   z-index: 0;
   min-width: 1600px;
}

<div id="rotate_bg" style="display: block; ">
   <img id="rotate_bg_img" src="/images/BG_spinach.jpg">
</div>

The same way we are doing it on missouriwine.org.

function resize_bg(){
 $("#bg").css("left","0");
 $("#bg-top").css("left","0");
 var doc_width = $(window).width();
 var doc_height = $(window).height();
 var image_width = $("#bg").width();
 var image_height = $("#bg").height();
 var image_ratio = image_width/image_height;      
 var new_width = doc_width;
 var new_height = Math.round(new_width/image_ratio);
 var bottle_width = $("#bottle").width();
 if(new_height<doc_height){
  new_height = doc_height;
  new_width = Math.round(new_height*image_ratio);
  var width_offset = Math.round((new_width-doc_width)/2);
  $("#bg").css("left","-"+width_offset+"px");
  $("#bg-top").css("left","-"+width_offset+"px");      
 }

 if(doc_width>(960+(bottle_width+15))){
  $("#bottle").css({"right":0});
 }else{
  $("#bottle").css({"right":((doc_width-960)-(bottle_width+15))});
 }
 $("#bg-top").width(new_width);
 $("#bg-top").height(new_height);
 $("#bg").width(new_width);
 $("#bg").height(new_height);

 }

Hm. Background is not stretching for me. (Chrome). Maybe you are talking about centering the content? Then use position:absolute.

It's a high res image (1446x960). They don't scale down, only up (if the browser dimensions are less than the image, it just clips it). If you resize the browser to be larger than the image, it starts stretching the image and then stops looking quite as crisp.

What they're doing is a fake background image:

<div id="rotate_bg" style="display: block; "><img id="rotate_bg_img" src="/images/BG_peaches.jpg"></div>

only works on some browsers, try backstretch for jQuery to accomplish the same thing: http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

That solution will work with a wider array of designs, browsers, etc.

To accomplish the background, they're using a large graphic file, that way it fills up most any screen size you're using to view the page. The graphics file is placed within a fixed-position div set to 100% of the width, and set so it's the bottom layer (z-index 0.) It's the fixed positioning that holds the graphic in place even when you scroll and creates a nice effect.

Then everything else is presented on top of the background image layer. If your browser actually renders a screen size larger than the image, the browser stretches the image to fit (in the same way it will constrain an image that's larger than the listed dimensions for an img tag.)