blocks|key|1140121|text|http://jsfiddle.net/JL3jL/2/embedded/result/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1140122|css|style|BOLD|1140123|img+{
++width:100%25;
++min-width:1600px;
++z-index:0;
++min-width:100px;
}

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

body+{
++margin:0;
++padding:0;
}|code-block|syntax|javascript|1140124|标记|1140125|<img+id="bg"+src="http://foodily.com/images/BG_grapes.jpg"/>|1140126|基本上发生的是，他们正在为图像设置最小宽度，因此它需要至少是那个大小，但可以增长超过宽度100%25。|1140127|可能会让人犯错的是，它不是一个元素的背景图像，而是一个实际的img标签，设置为在所有内容下显示。|1140128|entityMap|0|LINK|mutability|MUTABLE|url^0|0|18|0|0|0|3|0|0|0|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@$A|16|B|17|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|19|8|@$A|1A|B|1B|F|G]]|9|@]|C|$]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|C|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|4]]]]

<a href="http://jsfiddle.net/JL3jL/2/embedded/result/" rel="nofollow">http://jsfiddle.net/JL3jL/2/embedded/result/</a>

css

<pre><code>img {
 width:100%;
 min-width:1600px;
 z-index:0;
 min-width:100px;
}

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

body {
 margin:0;
 padding:0;
}
</code></pre>

Markup

<pre><code>&lt;img id="bg" src="http://foodily.com/images/BG_grapes.jpg"/&gt;
</code></pre>

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.

blocks|key|4805937|text|这是一张1920x1200的图像，所以这会影响图像在不同分辨率下的外观。之后，CSS告诉img标签的宽度为100%25。所以当你伸展浏览器时，图像要保证是100%25的。它们还设置了最小宽度，以确保图像不会小于1600px宽。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4805938|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|4805951|text|他们在背景上保留了一个非常大的<img>，并将其样式化为浏览器宽度的100%25：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4805952|#rotate_bg+{
+++position:+fixed;
+++top:+0;
+++bottom:+0;
+++width:+100%25;
+++z-index:+0;
}

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

<div+id="rotate_bg"+style="display:+block;+">
+++<img+id="rotate_bg_img"+src="/images/BG_spinach.jpg">
</div>|code-block|syntax|javascript|4805953|entityMap^0|F|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

They keep an <code>&lt;img&gt;</code> extremely large on the background, and stylize it to stretch to 100% of the browser width:

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

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

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

blocks|key|4805977|text|就像我们在missouriwine.org.上做的一样|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4805978|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","-"%2Bwidth_offset%2B"px");
++$("#bg-top").css("left","-"%2Bwidth_offset%2B"px");++++++
+}

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

+}|code-block|syntax|javascript|4805979|entityMap|0|LINK|mutability|MUTABLE|url|http://missouriwine.org/^0|5|H|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

The same way we are doing it on <a href="http://missouriwine.org" rel="nofollow">missouriwine.org.</a>

<pre><code>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&lt;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&gt;(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);

 }
</code></pre>

blocks|key|1139981|text|嗯。背景对我来说并不是一件容易的事。(Chrome)。也许你说的是居中的内容？然后使用position:absolute。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1139982|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|3206639|text|这是一张高分辨率的图像(1446x960)。它们不会缩小，只会放大(如果浏览器的尺寸小于图像，它只会对其进行裁剪)。如果您将浏览器的大小调整为大于图像大小，它会开始拉伸图像，然后就不再看起来那么清晰。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3206640|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1919399|text|他们所做的是一个假的背景图像：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1919400|<div+id="rotate_bg"+style="display:+block;+"><img+id="rotate_bg_img"+src="/images/BG_peaches.jpg"></div>|code-block|syntax|javascript|1919401|仅适用于某些浏览器，尝试使用backstretch让jQuery实现同样的功能：http://srobbin.com/blog/jquery-plugins/jquery-backstretch/|offset|length|1919402|该解决方案将适用于更广泛的设计、浏览器等。|1919403|entityMap|0|LINK|mutability|MUTABLE|url|http://srobbin.com/blog/jquery-plugins/jquery-backstretch/^0|0|0|14|1M|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

What they're doing is a fake background image:

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

only works on some browsers, try backstretch for jQuery to accomplish the same thing: <a href="http://srobbin.com/blog/jquery-plugins/jquery-backstretch/" rel="nofollow">http://srobbin.com/blog/jquery-plugins/jquery-backstretch/</a>

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

blocks|key|1140161|text|为了完成背景，他们使用了一个大的图形文件，这样它几乎填满了你用来查看页面的任何屏幕大小。图形文件被放置在一个固定位置的div中，该div设置为宽度的100%25，并设置为最底层(z索引为0)。它是固定的位置，即使你滚动的时候也能保持图形的位置，并创造出一种很好的效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1140162|然后，其他所有内容都显示在背景图像层的顶部。如果您的浏览器实际呈现的屏幕尺寸大于图像，浏览器将拉伸图像以适应(同样的方式，它将约束大于img标记列出的尺寸的图像)。|1140163|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.)

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)

<a href="http://foodily.com" rel="nofollow">http://foodily.com</a>

How is foodily accomplishing this background image effect?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我很好奇Foodily.com是如何实现这个背景效果的？(无论浏览器如何调整大小，背景都会被拉伸，看起来很好)

问foodily是如何实现这个背景图像效果的？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问foodily是如何实现这个背景图像效果的？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问foodily是如何实现这个背景图像效果的？
EN