CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2712756
user2712756

Reputation: 15

background image pattern acting weird while scrolling in chrome/safari

http://testingprth.hostingsiteforfree.com/demo/

If you scroll the page in safari or chrome, you'll notice that the background pattern has some issues. I believe it's to do with the videoBG.js file as it works fine with a simple jpg background file.

Could anyone help/suggest which line to edit so i can have this pattern working? Thanks.

Upvotes: 1

Views: 411

Answers (1)

Matt Fellows
Matt Fellows

Reputation: 6532

I fixed it by moving the <div id="bgpattern"></div> after the <div class="videoBG">...</div> in the markup. Is that possible for you?

===EDIT===

I'm not sure you need a script to do this... Sites I've implemented with background video just use the following markup.

<video id="videoplayer" poster="Static-Fall-Back-Image.jpg" autoplay="" loop="">
    <source src="Video.mp4" type="video/mp4">
    <source src="Video.ogv" type="video/ogg">
    <img src="Static-Fall-Back-Image.jpg" style="width:100%;">
</video>

with the following CSS:

#videoplayer {
  min-width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
}

This certainly works on http://www.issuecentre.com which is a site I developed.

Upvotes: 1

Related Questions