正文背景图片没有填满页面

时间:2013-11-05 00:01:28

标签: html css background repeat

我不确定发生了什么事情,因为没有改变CSS,但突然我的背景图像停在页面顶部,无论我改变什么都不会发出警告

这是HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Just Joel</title>
    <link href="../CSS/JJ.css" rel="stylesheet" type="text/css" />
    <link href="../CSS/grogrotesque.css" rel="stylesheet" type="text/css">
    <link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">

   <meta charset="utf-8" />

<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
   <script type="text/javascript" src="../js/jquery.corner.js"></script>
<script type='text/javascript' src="../js/slideshow.js"></script>


   <link rel="stylesheet" href="../London Food Therapy/css/style.css" type="text/css" media="screen" />
<style type="text/css">
@import url("../../../CSS/JJ.css");
</style>
    </head>

    <body>

<div id="wrapperfull">

    <div id="header">
    <a href="../London Food Therapy/index.html"><img src="../../../Images/Header.png" width="379" height="99" alt="Just Joel Header"></a>
    </div><!-- end header div -->

    <div class="navigation">
    <nav>
    <ul>
    <li><a href="../../index.html">HOME</a></li>
    <li><a href="../../about.html">ABOUT</a></li>
    <li><a href='#'><span>WORK</span></a>
    <ul>
    <li class="services1">
    <a href="../../print.html">PRINT</a>
    <a href="../../branding.html">BRANDING</a>
    <a href="../../editorial.html">EDITORIAL</a>
    <a href="../../photography.html">PHOTOGRAPHY</a>
    </li>
    </ul>
    </li>
    <li><a href="../../blog.html">BLOG</a></li>
    <li><a href="../../inspired.html">INSPIRED</a></li>
    <li><a href="../../contact.html">CONTACT</a></li></ul>
    </nav>
    </div><!-- end navigation div -->

    <div class="blog-container">
    <div id="sidebarwrapper">

<div id="sidebar">

<div class="arrow right"><a href="../London Food Therapy/index.html"></a></div><div class="arrow"><a href="../London Food Therapy/Just Joel home.html"></a></div>

        <h1>DENTAL PERFECTION</h1>
        <br>
  <p>Tree Top News is a publcation produced through Highgate Woods, a heritage woodland in London</p>

  <p>I produced the publication two years running, capturing the amazing nature and wildlife around he wood. I was responsible for rt direction, design and print.</p>

    <script>
       $(window).scroll(function(){  

    if($(window).scrollTop() + $(window).height() >= $(document).height() - 200){
        setLeftBarPosition();
    }
        });

function setLeftBarPosition(){     //你的代码设置lefftbar的位置

      }
    </script>

    </div><!--sidebar!-->
    </div>


<div class="project">
        <img src="../../../Images/Dental/Dental5.jpg" alt="Kookielogo" class="image" height="378" width="580">
        <img src="../../../Images/Dental/Dental4.jpg" alt="Tree Top" class="image" height="378" width="580">
        <img src="../../../Images/Dental/Dental2.jpg" alt="Tree Top" class="image" height="378" width="580">
        <img src="../../../Images/Canons high/Canons5.jpg" alt="Tree Top" class="image" height="378" width="580">
        <img src="../../../Images/Canons high/Canons6.jpg" alt="LFT" class="image" height="378" width="580">

    <div class="clear"></div>

    </div>

    </div>


    </div>

    </div>

    </body>
    </html>

CSS

    html{
margin: 0;
padding: 0;
border: none;
height: 100%;
    }

    body {
margin: 0;
padding: 0;
border: none;    
height: 100%;
background-image: url(../Images/Lines%20background.jpg);
background-repeat: repeat;
background-attachment: fixed;
    }

1 个答案:

答案 0 :(得分:0)

在您的body课程中,您应添加background-size: cover;,以便涵盖整个<body>