Несколько фоновых изображений с использованием CSS3

Question

Я пытаюсь понять, как разместить несколько фоновых изображений с помощью CSS3.У меня не все хорошо.Как вы получаете изображение, чтобы расположить вверху страницы, в середине страницы и внизу страницы?Давайте просто использовать блок 100px x 100px для иллюстрации.Я могу получить их только по верху.

CSS

body {
background-image: 
url(../images/red.png), 
url(../images/blue.png), 
url(../images/yellow.png);
background-position: left top, center top, right top;
background-repeat: no-repeat;
}

Я хочу, чтобы они оставались сверху, слева по центру, а затем слева внизу.

Спасибо

Answer 1

Вам нужно объединить свои теги.

body {
    background-image: 
        url(../images/red.png) left top no-repeat, 
        url(../images/blue.png) center top no-repeat,, 
        url(../images/yellow.png) right top no-repeat, 
}

Редактировать:

<style type="text/css"> 

    background-image: 
    url(../images/red.png),  
    url(../images/yellow.png);
    background-position: left top, left bottom;
    background-repeat: no-repeat;

    #centerIMG {
        margin-top:-50px;
        height: 100px;
        width:  100px;
        background:url(../images/blue.png) center left no-repeat;
    }
    #outer {height: 100%; overflow: hidden; position: relative;}
    #outer[id] {display: table; position: static;}

    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

    #inner {position: relative; top: -50%} /* for explorer only */
</style>
    <div id="outer">
        <div id="middle">
            <div id="inner">
                <div id="centerIMG"></div>
            </div>
        </div>
    </div>

Редактировать:

<style type="text/css"> 
    body
    {
        background:
            url("red.png") top repeat-x,
            url("blue.png") bottom repeat-x,
            url("orange.png") center repeat;

            background-size: 200px, 100px;
    }
</style>