Question

所以我已经设置了我的HTML并且我已经开始相应地开始样式，但是我正在尝试创建填充/覆盖效果，因此我的图像适合页眉和页脚并覆盖屏幕但是我得到了这个问题。我想要的是它覆盖整个页面/屏幕。

我确定这是一个简单的解决方法，我无法理解它！

http://s28.postimg.org/he9h8lae3/screene.png

继承我的代码

HTML

`<body>

        <header id="page-header">
            <div class="container">
               <h1></h1>
                <h2></h2>
            </div>
         </header>

          <section class="page-main">
            <div class="container">
                <div class ="main">


             </div>
            </div>
          </section>

            <footer id="page-footer">
                <div class="container">
                 <h4></h4>
                <nav>
                    <ul>
                  <li><a href="feedback.html">Got Feedback?</a></li>
                </ul>
            </nav>
            </footer>
        </div><!-- #container -->
    </body>
</html>

CSS

body {
    color: #000;
    font-family: 'Rokkitt', serif;
    font-size: 1em;
    line-height: 1.2;
    width: 100%;
    height: 100%; }



#container {
    max-width: 1280px;
    margin: auto; }

main { display: block }


h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2em;
    line-height: 1;
    font-weight: bold; }

h2 {
    font-size: 1.2em;
    margin: 20px 0 20px 20px;
    text-align: center; }

h3 {  }


#page-header {
    background-color: #FFB90F;
    color: black;
    overflow: hidden; }

    #page-header h1 {
        color: black;
        margin: 20px 0 20px 20px;
        text-align: center; }


.page-main {
    background: url("../images/img_a.png") center center no-repeat;
    height: auto;
    background-size: cover;
    overflow: hidden;
    padding: 3%;
    box-shadow: inset 0 0 5px rgba(0,0,0,.75); }

#page-footer {
    background: #282828;
    color: white; }

    #page-footer nav { text-align: right; }

        #page-footer nav li {
            color: white;
            display: block; }

        #page-footer nav a {
            color: white;
            display: block;
            margin-right: 20px; }

Answer 1

如果您想覆盖空间，可能需要查看CSS3 background-size。

element{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 2

<强> CSS

我假设背景图片附加到div.container

.container{
     background-image: url('Whateveryoururlis');
     height: HeightofImage;
     width: widthofImage;
 }

Height和width很重要。

难以在页眉/页脚之间插入背景图像

CSS

2 个答案: