css background not working in div

Question

I have a little problem with my code but I can't find where is the issue. If I use a backgraund in css with the "body" tag, it shows, but if I do the same with a div, it remains in white.

The code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div id="one">
        <header>
        </header>
        <section>
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

css

#one{
    background: url(../img/background.jpg);
    background-repeat: repeat;
    background-size: cover;
    display: block;
    height: 100%;
    width: 100%;
}

and a javascript (just incase)

$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', 0 + 'px '+ x +'px');
    }, 200);
})

I tried with the 'body' and it works, but only with the body :(

Why don't you show your failing attempt??? Maybe i miss understand your issue. Is it related to CSS or js or both? — A. Wolff, Nov 20 '15 at 11:24
Seems like it works fine: http://jsfiddle.net/4eweL11j/. Have you debugged at all? Is there any errors in the console? — Rory McCrossan, Nov 20 '15 at 11:26
Seems like you are miising CSS rule: `html, body { height: 100%; width: 100%; }` Otherwise your DIV wouldn't have any size defined:**EDIT:** @RoryMcCrossan Oh ya, just see your jsFiddle ;) — A. Wolff, Nov 20 '15 at 11:27
Css i gues. i don't have any report from the console, the background just is not shown, is only seen when using the "body" tag in css — ithan, Nov 20 '15 at 11:29
@ithan Maybe that helps: http://stackoverflow.com/questions/16871236/why-doesnt-html-and-body-take-all-available-height-of-document-when-min-height — A. Wolff, Nov 20 '15 at 11:30

score 0 · Answer 1 · answered Nov 20 '15 at 11:35

0

To use 100% height in your #one div you need also to set 100% height for your body and html tags. 100% width will work without this rule. So add the following line to your css file:

html, body { height: 100%; }

answered Nov 20 '15 at 11:35

kaigorodov

877
9
15

score 0 · Answer 2 · answered Nov 20 '15 at 11:37

Is this the complete HTML are you trying with? In the code you give us, your div doesn't have size because it doesn't have content. In the snnipet you can see your code with content added to the div#one.

A ramdom googled image is used as background for testing purposes .

$(function(){
        var x = 0;
        setInterval(function(){
            x-=1;
            $('body').css('background-position', 0 + 'px '+ x +'px');
        }, 200);
    })

#one{
    background: url(http://7-themes.com/data_images/out/76/7030767-3d-background-wallpaper.jpg);
    background-repeat: repeat;
    background-size: cover;
    display: block;
    height: 100%;
    width: 100%;
}

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
        <div id="one">
            <header>
              <p>Sample Header</p>
            </header>
            <section>
            </section>
            <footer>
            </footer>
        </div>
</body>
</html>

css background not working in div

2 Answers2