blocks|key|3116002|text|您可以使用浏览器的开发工具来确切地查看该站点是如何产生这种效果的。它是CSS和JavaScript的组合。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3116003|CSS：|3116004|.homepage-intro.homepage+{
++++background:+url("//d1sva73gxwx496.cloudfront.net/images/homepage/bg-intro-2039a477.jpg")+no-repeat;
++++background-size:+cover;
}|code-block|syntax|javascript|3116005|然后，JavaScript显式地设置<div>的高度以匹配浏览器窗口。|offset|length|style|CODE|3116006|entityMap^0|0|0|0|I|5|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You can use your browser's developer tools to see exactly how that site creates the effect. It's a combination of CSS and JavaScript.

The CSS:

<pre><code>.homepage-intro.homepage {
 background: url("//d1sva73gxwx496.cloudfront.net/images/homepage/bg-intro-2039a477.jpg") no-repeat;
 background-size: cover;
}
</code></pre>

The JavaScript then explicitly sets the height of the <code>&lt;div&gt;</code> to match the browser window.

blocks|key|3115957|text|有不同的方法。如果您检查您所链接的站点，他们将使用背景封面来完成这一任务。background-size:+cover;它将填充当前div的宽度和高度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3115958|有关更多信息，请参见本文：https://css-tricks.com/perfect-full-page-background-image/|3115959|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/perfect-full-page-background-image/^0|11|N|0|D|1M|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

There are different approaches. If you inspect the site you linked, they are using background cover to accomplish this. <code>background-size: cover;</code> It will fill up the width and height of the current div.

See this article for more info: <a href="https://css-tricks.com/perfect-full-page-background-image/" rel="nofollow">https://css-tricks.com/perfect-full-page-background-image/</a>

blocks|key|3116060|text|该站点使用JavaScript设置具有该背景图像的<div>的高度。与background-size:+cover;相结合，应该可以做到这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3116061|entityMap^0|P|5|Z|N|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

That site is using JavaScript to set the height of the <code>&lt;div&gt;</code> that has that background image. Combined with <code>background-size: cover;</code>, that should do it.

blocks|key|775937|text|如果你想确保你的div底部点击浏览器窗口的底部，你可以通过CSS做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|775938|CSS|775939|div+{
++++height:100vh;
}|code-block|syntax|javascript|775940|或|775941|body,+html+{
+++height:+100%25;
}

div+{
++height:+100%25;
}|775942|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you want to make sure the bottom of your div hits the bottom of the browser window, you can do this via CSS.

<h3>CSS</h3>

<pre class="lang-css prettyprint-override"><code>div {
 height:100vh;
}
</code></pre>

or 

 <pre class="lang-css prettyprint-override"><code>body, html {
 height: 100%;
}

div {
 height: 100%;
}
</code></pre>

blocks|key|3116103|text|您将需要CSS和jQuery来有效地做到这一点(同时也允许跨浏览器支持)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3116104|CSS|offset|length|style|BOLD|3116105|//Add+this+to+your+background+image's+CSS.
++background-size:+cover;
++background-repeat:+no-repeat;
++position:+relative;
++background-position:+center;
++height:+100%25;|code-block|syntax|javascript|3116106|jQuery|3116107|var+viewportHeight+=+jQuery(window).height();
//wrote+an+if+statement+to+allow+for+a+minimum+height.+You+can+remove+this+if+statement+if+you+don't+need+it.
if(viewportHeight>500){
+++++jQuery('page-wrapper').height(viewportHeight);
}else{
+++++jQuery('page-wrapper').height(500);
}|3116108|entityMap^0|0|0|3|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

You will require CSS and jQuery to do this effectively (and also to allow for cross-browser support).

CSS

<pre><code>//Add this to your background image's CSS.
 background-size: cover;
 background-repeat: no-repeat;
 position: relative;
 background-position: center;
 height: 100%;
</code></pre>

jQuery

<pre><code>var viewportHeight = jQuery(window).height();
//wrote an if statement to allow for a minimum height. You can remove this if statement if you don't need it.
if(viewportHeight&gt;500){
 jQuery('page-wrapper').height(viewportHeight);
}else{
 jQuery('page-wrapper').height(500);
}
</code></pre>

blocks|key|3116138|text|要解决这个问题，您需要完成两项任务：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3116139|使背景图像始终调整到容器的大小。正如其他人已经说过的那样，这是通过将background-size:+cover;分配给将映像作为background-image放置在其上的容器元素来完成的。在低分辨率设备上添加background-position:+center;以获得更好的效果，以及纵向定位。|ordered-list-item|offset|length|style|CODE|3116140|确保容器元素在两个方向上都扩展了视口宽度的100%25。块级元素每个默认抓取100%25的可用宽度，但您需要设置一个明确的高度，以匹配所需的布局。这可以通过将height:+100vh;+(100%25视口高度)应用于容器元素来实现。检查单元vh在您计划布局的设备上是否可用：http://caniuse.com/#search=vh|3116141|如果您需要支持不识别vh的浏览器，那么使用javascript+(或jQuery)动态地为容器元素分配高度可能是最简单的解决方案。|3116142|这是如何在jQuery中为<div+id="my-container-element"></div>所做的|3116143|$("#my-container-element").height($(window).css("height");|3116144|纯Javascript中也是如此：|3116145|document.getElementById("my-container-element").style.height(window.innerHeight%2B"px");|3116146|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#search=vh^0|0|Y|N|1T|G|2Y|S|0|23|E|37|2|3O|T|0|0|A|2|0|D|11|0|0|1M|0|0|0|2E|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@$E|14|F|15|G|H]|$E|16|F|17|G|H]|$E|18|F|19|G|H]]|9|@]|A|$]]|$1|I|3|J|5|D|7|1A|8|@$E|1B|F|1C|G|H]|$E|1D|F|1E|G|H]]|9|@$E|1F|F|1G|1|1H]]|A|$]]|$1|K|3|L|5|6|7|1I|8|@$E|1J|F|1K|G|H]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1L|8|@$E|1M|F|1N|G|H]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1O|8|@$E|1P|F|1Q|G|H]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1R|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1S|8|@$E|1T|F|1U|G|H]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

To solve this issue, you need to accomplish two tasks:

<ol>
<li>Make the background-image always adjust to the size of the container. This is done, as others have already stated, by assigning <code>background-size: cover;</code> to the container element on which you placed the image as a <code>background-image</code>. Add <code>background-position: center;</code> for better results on low resolution devices as well as portrait orientation.</li>
<li>Make sure the container element stretches 100% of the viewport's width in both directions. Block level elements per default grab 100% of the available width, but you need to set an explicit height to match the desired layout. This can be achieved by applying <code>height: 100vh;</code> (100% viewport height) to the container element. Check if the unit <code>vh</code> is usable on the devices you plan the layout for: <a href="http://caniuse.com/#search=vh" rel="nofollow">http://caniuse.com/#search=vh</a></li>
</ol>

If you need to support browsers that do not recognize <code>vh</code> it's probably the easiest solution to use javascript (or jQuery) to dynamically assign a height to your container element.

This is how it's done in jQuery for a <code>&lt;div id="my-container-element"&gt;&lt;/div&gt;</code>

<code>$("#my-container-element").height($(window).css("height");</code>

Same in pure Javascript:

<code>document.getElementById("my-container-element").style.height(window.innerHeight+"px");</code>

blocks|key|775834|text|在CSS工作表中尝试以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|775835|html+{++background:+url(myImage.jpg)+no-repeat+center+center+fixed;+background-size:+cover;}|code-block|syntax|javascript|775836|它会用你的背景图像填充整个页面。|775837|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try the following in your CSS sheet:

<pre><code>html { background: url(myImage.jpg) no-repeat center center fixed; background-size: cover;}
</code></pre>

It will fill the whole page with your background Image.

I am new to CSS and so i dont really know how to describe it but here is an example:<a href="http://www.vestorly.com/" rel="nofollow">website</a>

As you can see the background image at the top of the website fits perfect in height and width to the space of any browser regardless of the resolution. As you scroll down the page it keeps the same style where a specific background color fits closely to the space of the browser. I have tested this on a laptop as well as mobile and it fits closely each time. How do i achieve this? Is it doable purely from CSS or do i have to involve JavaScript/Jquery, etc? I have seen many websites use this specific style and i would like to understand hoe it is done.

I am not asking specifically for code, just an answer that states what it is i should be searching for. Code is appreciated however.

How do i make part of a CSS background fit perfectly to a browser

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

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

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

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

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我对CSS并不熟悉，所以我不知道如何描述它，但这里有一个例子：正如你可以看到的，在网站顶部的背景图像适合完美的高度和宽度与任何浏览器的空间，无论分辨率。当您向下滚动页面时，它保持相同的样式，其中特定的背景色与浏览器的空间非常匹配。我已经在笔记本电脑和手机上测试过这个，每次都非常适合。我怎样才能做到这一点？它是完全可以从CSS实现的，还是我必须涉及JavaScript/Jquery等等？我见过很多网

问如何使CSS背景的一部分与浏览器完全匹配？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使CSS背景的一部分与浏览器完全匹配？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使CSS背景的一部分与浏览器完全匹配？
EN