html - HTML フラグの背景

Question

HTML CSS でドイツ国旗の背景を作ろうとしているのですが、ちょっと難しいです。ボディと内側に縦8割横5割の白い部分を入れ前後で使ってみました。画面の真ん中にあるはずなので、上 50%、左 50% にしましたが、結果は非常に悪かったです。セクションはすべての記事があるべき場所なので、本文よりも大きな az インデックスを持つ空白のようなもので、旗の白のようなものです。

アップデート

jsFiddle: http://goo.gl/aCjHnK

Answer 1

::before と ::after: で動作するようになりました。

垂直スタック:

#background {
    width: 100%;
    height: 100%;
    background: red;
    position: absolute;
    top: 0;
    left:0;
    z-index:-1;
}
html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
#background::before {
    content: '';
    width: 100%;
    height: 33.33%;
    background: black;
    position: absolute;
    top: 0;
    left:0;
}

#background::after {
    content: '';
    width: 100%;
    height: 33.33%;
    background: gold;
    position: absolute;
    bottom: 0;
    left:0;
}

水平スタック:

#background {
    width: 100%;
    height: 100%;
    background: gold;
    position: absolute;
    top: 0;
    z-index:-1;
    left:0;
}
html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
#background::before {
    content: '';
    width: 33.33%;
    height: 100%;
    background: blue;
    position: absolute;
    top: 0;
    left:0;
}

#background::after {
    content: '';
    width: 33.33%;
    height: 100%;
    background: red;
    position: absolute;
    top: 0;
    right:0;
}