[SinLi93]

So now I could find out what part of the css is causing the error exactly...

.front-page-1 {
	//-webkit-backface-visibility: hidden;
	//-ms-backface-visibility: hidden;
	//backface-visibility: hidden;
	width: 100%;
	background: rgba(0, 83, 103, .3);
	text-align: start;
}

.introvideo {
	width: 100%;
	//position: absolute;
	top: 0;
	z-index: -1;
	overflow: hidden;
	height: 100%;
}

.introvideo video {
	width: 100%;
      //position: absolute;
	top: 0;
}

if one of the commented lines is on, the background images don't show up.
but now the theme doesn't look right anymore: quaksmedia.com

[SinLi93]

but you have to pay an extra 27 dollars to get his support :'D

[SinLi93]

so I finally found out what's the problem! It's the css code. Because I removed partly the changes I've done on the files and then looked if it works...
But I still have no idea why it's causing this problem...

The code is:

/* Video background for Front Page 1 section
--------------------------------------------- */

.front-page-1 {
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
background: rgba(0, 83, 103, .3);
text-align: start;
}

.front-page-1 .widget-title {
text-align: center;
}

.front-page-1 .image-section .widget-area {
text-align: start;
}

.introvideo {
width: 100%;
position: absolute;
top: 0;
z-index: -1;
overflow: hidden;
height: 100%;
}

.introvideo video {
width: 100%;
position: absolute;
top: 0;
}

.front-page-1 .wrap {
text-align: center;
}

/*.image-section.video-section {
background: transparent;
filter: none;
}*/

@media only screen and (max-width: 1024px) {

.introvideo {
background: url(images/background-dock.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.introvideo video {
display: none;
}

.home-section-1 .widget-title {
padding: 0 5%;
}

}
.image-section.video-section {
background: transparent;
filter: none;
}

[SinLi93]

just tried it on another domain and it works perfectly. http://quakstalk.com/
so that means I broke something when I created the background video...

[SinLi93]

hey guys,

unfortunately no success with changing the image size to 1600 x 1050...

[SinLi93]

hey, thanks to you all! I will try this out right away

[SinLi93]

hey, sorry I just change the theme for a second.
I must have broke something when I created the video background, but I have no idea what... Do u think the best idea is to delete the theme and reinstall and and then do the same again?

[SinLi93]

I followed this tutorial to put in the video background: https://sridharkatakam.com/how-to-replace-image-background-with-a-video-for-front-page-1-section-of-altitude-pro/

here is the code:

[SinLi93]

hmm, all my images have the size between 200 and 350 kb and they are still not loading...
just doesn't make sense 🙁

[SinLi93]

Well now the bottom image loads perfectly, but 3 min. ago it didn't.

[SinLi93]

yes, I disabled it now.
Doesn't really change anything...

[SinLi93]

yes, that happend to me as well...

[SinLi93]

the trouble starts at 1200 pixel on my computer... under it everything is fine...

[SinLi93]

Oh yes I can see that now... I put in the default images because I thought it's maybe because of the image size, but it still doesn't work.
So does it have something to do with the css file (because responsive)?

thanks a lot

[SinLi93]

hey, thank you very much! I thought it's weird because it worked before and then it just stopped... so must be something with my provider...

[Author]

Posts