2013-11-05 67 views
0

我不確定發生了什麼事情,因爲沒有改變CSS,但突然我的背景圖像停在頁面的頂部,不管怎樣,改變body background image does not fill the page

這裏是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(); 
    } 
     }); 

功能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

可能使用背景尺寸(https://developer.mozilla.org/en-US/docs/Web/CSS /背景大小)?也許[這個問題](http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only)也會有幫助。 – bmcculley

回答

0
body

您應該添加background-size: cover;,使其覆蓋整個<body>

+0

所有這一切都是進一步擠壓背景圖像,我想不出什麼可以突然做到這一點 –

+0

它顯示在Dreamweaver中罰款,但是當我上網它只是停止 –

+0

這是我目前的網站到目前爲止,我無法看到圖像如何停在背景上http://user48140.vs.easily.co.uk/ –