Background images not working in Chrome
Support Area › Forums › Moonrise › Background images not working in Chrome
Tagged: background, chrome, image, Moonrise, supreme shortcodes
- This topic has 5 replies, 2 voices, and was last updated 9 years, 9 months ago by
Bill Robbins.
-
AuthorPosts
-
April 24, 2015 at 23:04 #29161
Christopher Simmons
ParticipantI’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?
April 25, 2015 at 08:47 #29167Bill Robbins
ModeratorGood 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.
- 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.
- 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,
BillApril 25, 2015 at 09:30 #29170Christopher Simmons
ParticipantAha!
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!!
April 25, 2015 at 14:16 #29173Bill Robbins
ModeratorYou’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
April 25, 2015 at 19:29 #29183Christopher Simmons
ParticipantThat did it! Brilliant. Look like everything is working like a charm now.
Thank you!!
April 27, 2015 at 08:39 #29189Bill Robbins
ModeratorGlad to hear that did the trick. Have a great week 🙂
-
AuthorPosts
- The topic ‘Background images not working in Chrome’ is closed to new replies.