Altitude Pro – Background Images are not loading correctly

[SavvyJackie]

Before I did that, I would create another site and see if the problem exists before you begin adding the video code.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[vajrasar]

Well, if you have not done major changes (customizations) to the theme, then it won't be a bad idea to get a clean copy of the theme running to see if the issue occurs.

---

I make WordPress websites using Genesis Framework.

WordPress/Genesis Development | Customizations

[MoodyRiviera]

In your posts here you mentioned something about the size of your background images, but because of the way you said it I think you're confusing file size with pixel dimensions...and it's possible this might be causing your problem.

According to the Altitude Pro setup instructions, the default size for background images is 1600 x 1050 pixels...without regard to file size (kb).

I've measured your background images, and they are all different sizes...some larger and some smaller than the default image size specified in the setup instructions.

The instructions say that if your background images don't conform to this size, your images may not look right.

I think it's possible that not only the images might not look right, but also may not load at all...or will load in an erratic fashion if not sized to the default recommendation.

Why don't you create all new background images sized to exactly 1600 x 1050 pixels, and see if that helps?

*MoodyRiver*

[SavvyJackie]

Yes, good idea. As I mentioned earlier - the bg-3.jpg is HUGE in file size but still the right pixel size. It comes with the theme that way, most likely this is an oversight on the part of SP - and I've sent in a support ticket about that particular image. The other background images are fine.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[SavvyJackie]

I reduced mine in Photoshop down to 116K - same pixel size 1600 x 1050 using the "Save to Web", JPEG low - quality 10.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[SinLi93]

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

[SinLi93]

hey guys,

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

[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...

[SavvyJackie]

Good troubleshooting. At least you know it is not the default theme code. Just be sure to replace both bg-1.jpg and bg-3.jpg that comes with the theme as they are both much to large in file size - dimension fine - just file size.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[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;
}

[SavvyJackie]

Do you mention you got the code from Sridhar's website? If so, perhaps ask him if there is an obvious error he can see.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[SinLi93]

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

[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

[Sridhar Katakam]

Follow the updated alternative method, https://sridharkatakam.com/how-to-replace-image-background-with-a-video-for-front-page-1-section-of-altitude-pro-using-bigvideo/ instead.

---

Genesis Tutorials | Follow me on Twitter

[davidhq]

I have the same problem but only on Chrome (and I'm on Mac)

and it only happens when video is loaded in first section... using tutorial here:
https://sridharkatakam.com/how-to-replace-image-background-with-a-video-for-front-page-1-section-of-altitude-pro-using-bigvideo/

any hints from someone regarding this?

[Sridhar Katakam]

By commenting our or deleting background-attachment: fixed; for .front-page-1, .front-page-3, .front-page-5, .front-page-7 the front page should be usable in Chrome.

Of course the downside is that we are removing the semi-parallax scrolling effect for those sections. I am not sure why fixed background is causing this funky 'incomplete background loading' bug in Chrome.

---

Genesis Tutorials | Follow me on Twitter

[davidhq]

 
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
  if(is_chrome) {
    $('.front-page-1').css('background-attachment', 'scroll')
    $('.front-page-2').css('background-attachment', 'scroll')
    $('.front-page-3').css('background-attachment', 'scroll')
    $('.front-page-4').css('background-attachment', 'scroll')
    $('.front-page-5').css('background-attachment', 'scroll')
    $('.front-page-6').css('background-attachment', 'scroll')
    $('.front-page-7').css('background-attachment', 'scroll')
  }

[Sridhar Katakam]

Found a better/simpler solution.

Let the background attachment for these sections be fixed (assuming you want the quasi parallax effect). Change position from relative to static.

(Tested and confirmed working in Chrome using dev tools).

Source: http://stackoverflow.com/a/20297373/778809

---

Genesis Tutorials | Follow me on Twitter

[Sridhar Katakam]

If doing so causes the content of a section to butt into another, just set overflow to hidden for that section.

---

Genesis Tutorials | Follow me on Twitter

[davidhq]

Great, I also confirm it works...

so to make it clearer - I had to change this:

.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
border-top: 54px solid transparent;
margin-top: -54px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
position: relative static;
z-index: 9;
}

[Author]

Posts