css - 画像がまだ透明である間、前景の背景色は無地

Question

視差サイトの単純なビルドがあり、ある背景画像を別の背景画像に重ねようとしています。前景画像は基本的に透明な切り抜きのあるロゴで、切り抜きは画面に表示したい背景画像の唯一の部分です。

最初のスライドの残りの部分は単色にする必要があります。

前景画像の最高の品質を可能な限り維持するためにこれを行いたいのですが、％としてスケーリングしても半分には見えません。

デモサイトはこちらhttp://www.designandintention.com/Raikon/

これまでに問題となっている HTML:

<div align="center" class="slide" id="slide1" data-slide="1" data-stellar-background-ratio=".7">

<div align="center" id="menuwrapper">

<div align="center" id="slidemenu">
<div id="hrs">
</div>

Raikon Property Development

</div>

</div>

<div id="slideforeground" data-stellar-ratio="0" data-stellar-vertical-offset="0"alt="">

</div>

<a class="button" data-slide="2" title=""></a>

</div><!--End Slide 1-->


CSS:

.slide{
    background-attachment: fixed;
    width:100%;
    height:100%;
    position: relative;
    box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper{
    width:960px;
    height:200px;
    margin:0 auto;
    position:relative;
}
.slideno{
    font-family: 'Lato', sans-serif;font-weight:400;
    position:absolute;
    bottom:0px;
    left:0px;
    font-size:100px;
    font-weight:bold;
    color:rgba(255,255,255,0.3);
}
#menuwrapper {
width:90%;
height:0px;
}

#slideforeground{
background-image:url(../images/Foreground.png);
background-repeat:no-repeat;
background-position:center; 
height:100%; 
width:100%; 
}

/******************************
 SLIDE 1 
*******************************/
#slide1{

    background-color:#e3e8cf;
    background-image:url(../ribahighgate-dexigner-james.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size:cover;
}