body background image doesn't fill the page

Question

I'm not sure what's happened as haven't changed CSS but suddenly my background image stops towards the top of the page and won't cary on to the bottom no matter what i change

here is the 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(){ // your code to set position of 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;
    }

Possibly use [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)? Maybe [this question](http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only) will help as well. — bmcculley, Nov 05 '13 at 00:06

score 1 · Answer 1 · answered Nov 05 '13 at 00:28

1

in your body class you should add background-size: cover; so that it covers the entire <body>

answered Nov 05 '13 at 00:28

philip

216
1
10

All that does is squeeze the background image further, i can't think what could have done this all of a sudden – Just Joel Nov 05 '13 at 19:23
It shows up fine in dreamweaver but when i go online it just stops – Just Joel Nov 05 '13 at 23:02
This is my current site so far and i can't see how the image just stops on the background http://user48140.vs.easily.co.uk/ – Just Joel Nov 07 '13 at 00:19

body background image doesn't fill the page

1 Answers1