如何使用CSS使元素内部分区域显示父级元素的背景？

<div class="wrapper">        <header id="cover">            <div class="cover">            </div>        </header></div>html {    background: url(../images/bg.jpg) no-repeat center center fixed;     -webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover;     background-size: cover;     height: 100%;}.wrapper {    width: 85%;    margin: 0 auto;    background-color: #fff;    height: 90%;    position: relative;}header {    width: 50%;    text-align: center;}

Markup大概是这样的，header是wrapper内的一个宽度为父元素一半的子元素，现在我想使header能够显示设置在html元素上的背景图片bg.jpg，这个效果有点像，透过一张中间穿了孔的纸看背景，应该还挺常见的。

我使用了visibility:hidden和opacity: 0属性，都不生效，应该如何实现？

补充说明：请看图片，cover的位置如图，我希望cover这部分能看得到背景图像，也就是《霍比特人》的海报。
在