如何在屏幕下部设置背景？ CSS / HTML

Question

I'm making this... "game". 我正在做这个...“游戏”。 Currently, it's a little stickman that walks around. 目前，有个火柴人在四处走动。 There's also a tree. 还有一棵树。 But that doesn't matter for now. 但这暂时不重要。 I'm trying to set a background to the lower part of the screen. 我正在尝试将背景设置为屏幕的下部。 I've looked around and I can't seem to find an answer. 我环顾四周，似乎找不到答案。

I've tried to set DIV wrappers, but I already have one to make the background blue. 我尝试设置DIV包装器，但是已经有一个将背景设置为蓝色。 Also, if I'd make a div wrapper, I can't just select the lower portion of the screen. 另外，如果要进行div包装，则不能只选择屏幕的下部。 I know that I could do something like this 我知道我可以做这样的事情

div#wrapper {
    margin-top: 700px;
    background-image: url('terrain blah blah blah');
}

but that doesn't work, because it applies "margin" to every other thing with it. 但这是行不通的，因为它会将“保证金”应用于所有其他事物。 Since the div wrapper wraps the whole page. 由于div包装器包装了整个页面。

Here's the link: http://www.dotcomaftereverything.com/jquery/game . 这是链接： http : //www.dotcomaftereverything.com/jquery/game 。
As you can see, the whole page is blue. 如您所见，整个页面是蓝色的。 Because of the sky's color. 因为天空的颜色。

Thanks in advance. 提前致谢。

EDIT 编辑

I can't use margin-top, because the wrapper wraps the whole page, therefore taking everything else down with it.. Which results in a blank page. 我不能使用margin-top，因为包装器将包装整个页面，因此将其他所有内容都带走了。这将导致空白页面。

Answer 1

I think this could be a possible soultion. 我认为这可能是一种灵魂。

You already have a #terrain element into your page, so just wrap the part of HTML code relative to the game into a sub-container, add some CSS and you're done. 您的页面中已经有一个#terrain元素，因此只需将与游戏相关的HTML代码部分包装到一个子容器中，添加一些CSS即可。

HTML 的HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Life of an unlucky person</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js"></script>
    </head>
    <body>
        <div id='wrapper'>
            <div id="playarea">
                <p>Left/Right arrow keys to move, space to sit down.</p><br />
                <img src='http://www.dotcomaftereverything.com/jquery/sprites/spritePerson.png' id='img' />
                <img id='sitting' src='http://www.dotcomaftereverything.com/jquery/sprites/spriteSitting.png' />
                <img id='tree' src='http://www.dotcomaftereverything.com/jquery/sprites/spriteTree.png' />
            </div>
            <div id='terrain'></div>
        </div>
    </body>
</html>

CSS 的CSS

body {
    margin: 0;
    padding: 0;
    background-color: lightblue;
}

#playarea {
    position: relative;
    width: 100%;
    height: 70%;
}

    #playarea p {
        margin: 0;
    }

    #img {
        position: relative;
        margin-top: 375px;
    }

    #sitting {
        position: relative;
        margin-top: 375px;
    }

    #tree {
        position: relative;
        margin-top: 100px;
        margin-left: 700px;
    }

#terrain {
    width: 100%;
    height: 100px;
    background-color: green;
}

JS JS

$(window).on('load resize', function () {
    var playarea = $('#playarea'),
        terrain = $('#terrain'),
        pageHeight = $(window).height(),
        areaHeight = playarea.height();
    terrain.css('height', (pageHeight - areaHeight) + 'px');
});

$(document).ready(function () {
    var sitting = $('#sitting'),
        image = $('#img');
    sitting.hide();
    $(document).keydown(function (e) {
        var keyCode = e.keyCode || e.which,
            arrow = {
                left: 37,
                up: 38,
                right: 39,
                down: 40,
                space: 32
            };
        switch (keyCode) {
            case arrow.left:
                if (!sitting.is(':visible')) {
                    image.add(sitting).stop(true).animate({
                        left: '-=60px'
                    }, 300, "linear");
                }
                break;
            case arrow.up:
                break;
            case arrow.right:
                if (!sitting.is(':visible')) {
                    image.add(sitting).stop(true).animate({
                        left: '+=60px'
                    }, 300, "linear");
                }
                break;
            case arrow.down:
                break;
            case arrow.space:
                image.fadeToggle(-100, function () {
                    sitting.fadeToggle(-100);
                });
                break;
        }
    });
    $('#sit').click(function () {});
});

Here's a live example 这是一个现场例子

Answer 2

Try adding in position, repeat and attachment 尝试添加位置，重复和附件

div#wrapper {
margin-top: 700px;
background-image: url('terrain blah blah blah');
background-position:bottom left;
background-repeat:repeat-x;
background-attachment:fixed;
}

Answer 3

Use this way: 使用这种方式：

div#wrapper {
    margin-top: 700px;
    background: url('terrain blah blah blah') bottom center repeat-x fixed;
}

Answer 4

将底部的绝对位置设置为0不会解决您的问题吗？

<img src="http://img.wallpaperstock.net:81/floating-land-wallpapers_9536_1280x1024.jpg" style="position:absolute;bottom:0px;">

如何在屏幕下部设置背景？ CSS / HTML

问题描述

4 个解决方案

解决方案1
1 2013-02-03 15:42:47

解决方案2
0 2013-02-03 15:25:30

解决方案3
0 2013-02-03 15:26:19

解决方案4
0 2013-02-03 16:25:04

如何在屏幕下部设置背景？ CSS / HTML

问题描述

4 个解决方案

解决方案1 1 2013-02-03 15:42:47

解决方案2 0 2013-02-03 15:25:30

解决方案3 0 2013-02-03 15:26:19

解决方案4 0 2013-02-03 16:25:04

解决方案1
1 2013-02-03 15:42:47

解决方案2
0 2013-02-03 15:25:30

解决方案3
0 2013-02-03 15:26:19

解决方案4
0 2013-02-03 16:25:04