Backgroung Изображение не отображается на весь экран

Question

Я пытаюсь отобразить полное изображение в фоновом режиме. Но! это показывает очень странное поведение.

Это занимает всего 60% экрана. Остальная часть экрана имеет белый цвет. Но когда я определяю атрибут непрозрачности, эта непрозрачность применяется только на остальной части 40% экрана и изображения, которое начинает отображаться с эффектом непрозрачности (но только на этом 40% экране). ..

У меня много раз в googled и применялся много трюков css, но он не снимается с полным экраном с непрозрачностью. ..

Пожалуйста, помогите мне!

CSS:

html, body { 
    height:100%; 
} 

body{ 
    background: url(../..//images/background_pic.jpg) center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    opacity: 0.8; 
} 

Answer 1

Я нашел этот способ, чтобы решить вашу проблему. Проверьте this JSFiddle.

Стиль:

html, body { 
} 
.parent{ 
    position:relative; 
} 
.background{ 
    position:absolute; 
    background: url(http://farm6.static.flickr.com/5182/5613127636_e854aea66b_o.png) no-repeat center center fixed; 
    width: 100%; 
    height:100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    opacity: 0.3; 
} 
.foreground{ 
    position:relative; 
} 

HTML:

<div class="parent"> 
    <div class="background"></div> 
    <div class="foreground"> 
    Put text here. 
    </div> 
</div> 

Answer 2

Применить фон для HTML, а не тела.

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover; 
}