html - ピクセルの代わりにパーセントを使用して背景画像を疑似要素に設定する方法は?

Question

デモ

キーCSS

#tab-1:before {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;
    top: 10px;
    position: relative;
}

疑似を使用した直後に、幅100％、高さ100％の灰色のボックス内に背景画像を設定したかった:before

編集

私はこのようにしたい

しかし、このようではありません

または、このようではありません

Answer 1

これで、このcssを書くことができます

#tab-1{

position: relative;   z-index:1; 
}
#tab-1:before{
    content: "";
    background:  url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;
    top: 10px;
    position:absolute;
    left:0;right:0;top:0;bottom:0;z-index:-1;

}

デモ

======================

デモ 2ありBackground-size:cover

Answer 2

このコードを使用してください

http://jsfiddle.net/YUj5W/4/

.tab-contents{
    background: #2b2a26;
    padding: 0px 8px;
    clear: both;
}


#tabs {
    border-collapse: separate;
    border-spacing: 4px 0;
    float: right;
    list-style: none outside none;
    margin: 0 -4px 0 0;
    padding: 0;
}
#tabs li {
    background: none repeat scroll 0 0 #000000;
    border-radius: 19px 19px 0 0;
    display: table-cell;
    height: 47px;
    margin: 0 4px;
    text-align: center;
    vertical-align: middle;
    width: 145px;
}
#tab-1 {position:relative;}

#tab-1:before{
    content: "";
    display: block;
    width: calc100%;
    height:200px;
    background:  url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;

    top: 10px;
    left:0;
    background-size:cover;
    position: relative;

}