Question

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

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

我正在尝试创建一个未修复的全屏背景图像，并覆盖整个第一部分标记。以下是HTML＆amp;我当前的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>

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

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

Answer 1

试着添加：

body {
    margin:0;
}

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

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

Answer 2

借助这个伟大的教程

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

我意识到我不知道重要的是要知道

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

整页，我首先要设置父容器（html，body和outer

div）高度达到100％然后它终于奏效了。谢谢你的帮助！

全屏幕背景图片仅使用CSS

2 个答案: