html - 如何使用百分比而不是像素将背景图像设置为伪元素？

Question

demo

关键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;
}

我想在使用伪 :before 之后立即在 100% 宽度和 100% 高度的灰色框中设置背景图像

编辑

我想这样做

但不是这样的

或者不是这样

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;

}

Demo

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

Demo 2 使用 Background-size:cover