Background images not working in Chrome

Support Area Forums Moonrise Background images not working in Chrome

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://superduperburgers.com
  • Author
    Posts
  • #29161
    Christopher Simmons
    Participant

    I’ve notice that the background images (the images after each section) on the homepage don’t show up in Chrome. If you resize the browser window even a fraction the images will appear, but if you scroll pas them and then back they’re gone again.

    I’ve tried different size images, including very low res in case it was a browser memory issue) but nothing seems to make a difference.

    Any thoughts?

    #29167
    Bill Robbins
    Moderator

    Good Morning Christopher,

    I took a look and do see what you’re experiencing. Looking through the source code, nothing jumped out to me though as the likely cause. Here’s what I would do to find the trouble.

    1. Disable all plugins. Every single one. Then refresh your front page and view it again. If that fixed the issue, then turn them on, one by one checking the front page each time until the problem appears again. Then you’ll know where the trouble is.
    2. If that didn’t fix the trouble, then make a copy of the Custom CSS that’s been added and try removing it. See if that fixes the issue. If it does, then add it back style by style until it stops working again. That will let you know what’s up.

    Let me know if you need any help,
    Bill

    #29170
    Christopher Simmons
    Participant

    Aha!

    The culprit is/was the ‘Supreme Short Codes’ plugin.

    http://codecanyon.net/item/supreme-shortcodes-wordpress-plugin/6340769

    The challenge is that I’ve used it to style most of the site — particularly to get responsive columns.

    I’ve read that there is an issue with Chrome loading background images, having to do with ensuring the image url is load before the “background-size: cover” CSS. Not sure if this is related.

    I’m sure it is beyond the scope of your support to troubleshoot third part plugins, but if you have any immediate ideas on how I might resolve the confilct I’d be so grateful. Meanwhile I’m looking into other options for creating responsive columns.

    Thanks!!

    #29173
    Bill Robbins
    Moderator

    You’re welcome to swap the order of background-size: cover and the URL for each home block to see if that will help the trouble with the plugin. You’ll need to edit the page-home.php. The background image is loaded in several repeating blocks that look like this:

    
    <style>
    			
    	div#one .picture-block {
    		height: <?php echo of_get_option('section_image_height_1'); ?>px;
    		background-image: url(<?php echo of_get_option('section_image_1'); ?>);  
    	}
    				
    </style>
    

    and change them to be like this:

    
    <style>
    			
    	div#one .picture-block {
    		height: <?php echo of_get_option('section_image_height_1'); ?>px;
    		background-image: url(<?php echo of_get_option('section_image_1'); ?>);
    		background-size: cover;
    	}
    				
    </style>
    

    You’ll also need to edit the style.css file and change this (line 612):

    
    div.picture-block {	
    	width: 100%;
    	background-attachment: fixed; 
    	background-position: top center; 
    	background-repeat: no-repeat; 
    	-moz-background-size: cover; 
    	-webkit-background-size: cover; 
    	background-size: cover;
    	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); 
    }
    

    and remove the background size references there. Then save your changes. That should let you swap out the size and image URL styles so the background image is before the background size. Hopefully that will do the trick for you.

    Bill

    #29183
    Christopher Simmons
    Participant

    That did it! Brilliant. Look like everything is working like a charm now.

    Thank you!!

    #29189
    Bill Robbins
    Moderator

    Glad to hear that did the trick. Have a great week 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Background images not working in Chrome’ is closed to new replies.