CODEWITHSUNDEEP
cssgoogle-chrome
Rough
Rough

Reputation: 366

background doesn't stay fixed when I add video header -chrome

Please see background effect here: https://jsfiddle.net/xorkme75/embedded/result/

background is fixed here. so when you scroll the page, you can see rest of the image. for example scroll down and you can see the lady's face.

Works both chrome and firefox.

*

But when I add video to header. This effect not working in chrome anymore. Here is example (please see in chrome): http://areafordemos.net63.net/chrome.html

How did I broke it?

I added to CSS:

#video-container {  
    top: 10%;
    width:100%;
    height:70%;
    overflow: hidden;
    z-index:-1; 
    }

video.fillWidth {
    width:100%;
    }

and I added to HTML:

<div id="video-container">
    <video autoplay muted loop paused class="fillWidth">
        <source src="xhttp://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/>
        <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"/>
        Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
</div><!-- end video-container -->

CSS Code of broken area:

.dzen_bg {
background-image: url('http://seventhqueen.com/themes/kleo/sensei-e-learning/wp-content/uploads/sites/6/2015/06/hero16.jpg'); 
background-size: 100% 100%;
background-repeat: no-repeat; 
background-position: 100% 12px; 
background-attachment: fixed;
padding-top: 10px; 
background-size: 100% 100%;
}

When I delete width: 100%; from video.fillWidth for example effect is back but video doesn't look like I want. So I am literally stuck.

Upvotes: 2

Views: 116

Answers (2)

AleshaOleg
AleshaOleg

Reputation: 2201

You have height: 70% in #video-container, if you remove it will work fine. And add this height to video.fillWidth

Upvotes: 0

icencrime
icencrime

Reputation: 68

Try to add z-index:-2; to .dzen_bg. Because I see you have z-index:-1; on #video-container. I guess it will fix yout problem.

Upvotes: 1

Related Questions