全屏背景图片仅使用 CSS

Question

所以我目前正在重新设计 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>

这是 CSS 我有 atm，是否可以把它变成这个（图片）：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

我意识到我没有意识到了解

的重要性这一事实

parent div 的高度。所以为了让节容器填充

整个页面，我首先必须设置 parent 容器的（html、主体和外部

div) 高度到 100% 然后终于成功了。感谢您的帮助！

全屏背景图片仅使用 CSS

Full screen Background Img using just CSS

html

css

image

background-image

fullscreen