仅使用 CSS 的全屏背景图像答案

【问题标题】：Full screen Background Img using just CSS仅使用 CSS 的全屏背景图像
【发布时间】：2015-11-08 16:20:20
【问题描述】：

所以我目前正在重新设计 CSS Zengarden 网站。

我不允许以任何方式触摸或更改 HTML，因此所有样式都必须仅使用 CSS 完成（因此我无法创建额外的类或 div）。

我正在尝试创建一个未固定并覆盖整个第一个 Section 标记的全屏背景图像。下面是 HTML 和我当前的 css 以及一些注释掉的东西。

我可以让它全屏显示，但它与它下面的其他 div 重叠。

现在的 HTML 是否有可能？

<body id="css-zen-garden">
<div class="page-wrapper">

    <section class="intro" id="zen-intro">
        <header role="banner">
            <h1>CSS Zen Garden</h1>
            <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
        </header>

        <div class="summary" id="zen-summary" role="article">
            <p>A demonstration of what can be accomplished through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.</p>
            <p>Download the example <a href="/examples/index" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">css file</a></p>
        </div>

        <div class="preamble" id="zen-preamble" role="article">
            <h3>The Road to Enlightenment</h3>
            <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
            <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr>, and the major browser creators.</p>
            <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
        </div>
    </section>

    <div class="main-supporting" id="zen-supporting" role="main">
        <div class="explanation" id="zen-explanation" role="article">
            <h3>So What is This About?</h3>
            <p>There is a continuing need to show the power of <abbr title="Cascading Style Sheets">CSS</abbr>. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The <abbr title="HyperText Markup Language">HTML</abbr> remains the same, the only thing that has changed is the external <abbr title="Cascading Style Sheets">CSS</abbr> file. Yes, really.</p>
            <p><abbr title="Cascading Style Sheets">CSS</abbr> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
        </div>

这是我有atm的CSS，是否可以把它变成这个（图片）：http://www.bucketlistly.com/？

.intro {
  position: ;
  background-image: url(mountain-zengarden.jpg);
  width: 100%;
  height: 100%;
  max-width: 100%;
}

【问题讨论】：

标签： html css image background-image fullscreen

【解决方案1】：

尝试添加：

body {
    margin:0;
}

.intro {
  width: 100%;
  height: 100%;
  max-width: 100%;
}

然后你可以修改高度。所以你可以制作一个整页的div。

【讨论】：

并让其余的 CSS 保持不变？ .intro 类的定位呢？
你有你想要的结果的例子吗？

【解决方案2】：

通过这个很棒的教程的帮助

https://www.youtube.com/watch?v=hExwnLlj2xk

我意识到我没有意识到意识到这一点很重要

父 div 的高度。所以为了让section容器填满

整个页面，我首先要设置父容器的（html、body、outer）

div) 高度到 100% 然后它终于工作了。不过感谢您的帮助！

【讨论】：