• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Altitude Pro – Background Images are not loading correctly

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Altitude Pro – Background Images are not loading correctly

This topic is: not resolved
  • This topic has 40 replies, 7 voices, and was last updated 7 years ago by Cre8ivE_OnE.
Viewing 20 posts - 21 through 40 (of 41 total)
← 1 2 3 →
  • Author
    Posts
  • May 10, 2015 at 11:51 am #151535
    SavvyJackie
    Member

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

    May 10, 2015 at 11:51 am #151536
    vajrasar
    Member

    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

    May 10, 2015 at 12:09 pm #151544
    MoodyRiviera
    Member

    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*

    May 10, 2015 at 12:12 pm #151546
    SavvyJackie
    Member

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

    May 10, 2015 at 12:16 pm #151549
    SavvyJackie
    Member

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

    May 10, 2015 at 12:30 pm #151554
    SinLi93
    Member

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

    May 10, 2015 at 1:22 pm #151565
    SinLi93
    Member

    hey guys,

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

    May 10, 2015 at 1:29 pm #151567
    SinLi93
    Member

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

    May 10, 2015 at 1:35 pm #151571
    SavvyJackie
    Member

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

    May 10, 2015 at 1:41 pm #151573
    SinLi93
    Member

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

    May 10, 2015 at 1:46 pm #151575
    SavvyJackie
    Member

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

    May 10, 2015 at 2:02 pm #151577
    SinLi93
    Member

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

    May 10, 2015 at 2:16 pm #151580
    SinLi93
    Member

    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

    May 15, 2015 at 5:26 pm #152366
    Sridhar Katakam
    Participant

    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

    May 19, 2015 at 1:37 am #152699
    davidhq
    Member

    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?

    May 19, 2015 at 6:29 am #152730
    Sridhar Katakam
    Participant

    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

    May 19, 2015 at 6:47 am #152732
    davidhq
    Member
     
    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')
      }
    
    
    May 19, 2015 at 6:51 am #152735
    Sridhar Katakam
    Participant

    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

    May 19, 2015 at 6:55 am #152740
    Sridhar Katakam
    Participant

    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

    May 19, 2015 at 6:59 am #152741
    davidhq
    Member

    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
Viewing 20 posts - 21 through 40 (of 41 total)
← 1 2 3 →
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2022 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble