Overlay color used within the block is overlaying other parts of page when viewed in Chrome

Permalink Browser Info Environment
Hi ,

I have a slight issue with Background image overlay add-on. When I use overlay background colour the same gets overlayed not only over the Background image but also over the all slide block parts which then influences slide background colour (if it is white).

This only happens when opening page in Chrome or Firefox/Mozilla in IE white background of the slide stays white.

Is there a way to override this in Chrome?

Regards,

Aleksandar

Type: Discussion
Status: Resolved
View Replies:
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi hive,

Are you using a custom theme?

Please include a link to a page where this is happening.
hive replied on at Permalink Reply
Sorry for the late reply but I did not receive any notification from the system regarding your reply and I was away for the last few weeks.

Well, what happens is that after I insert the add on on all pages only first page image is visible and on all of the rest of the pages instead of image I get white background. I have set up all pages, slides and other elements background colour to none (transparent) and I still get white background. I have cleared the Concrete5 cache.

I am using a custom theme - Long Story Short Parallax.

Link to the working site:http://novi.meridian-apr.hr

You can see that only first page image is visible. Oh yes, this ONLY happens in Chrome. In IE everything works as it should
MrKDilkington replied on at Permalink Reply 2 Attachments
MrKDilkington
The problem is caused by the JavaScript parallax effect in the Long Story Short theme. This effect layers <div> tags, with an image or colored background, on top of the background image.

Example: no parallax effect - background image is visible
http://novi.meridian-apr.hr/index.php...

Example: parallax effect - background image is not visible
http://novi.meridian-apr.hr/index.php/services...
This is one of the "parallax blocks" that is layered on top of the background image. The div within it, with the class of "parallax-image", has a white background.
<div class="parallax-block" style="width: 1253px; height: 513px; visibility: hidden;">
    <div class="parallax-image" style="background-color: rgb(255, 255, 255); width: 1253px; height: 1253px; background-position: initial initial; background-repeat: initial initial;"></div>
    <span class="drop-shadow"></span>
</div>

I did a quick check using different browsers.

Does work:
IE9 and IE11

Does not work:
Microsoft Edge
Chrome
Firefox

At this time, I would not recommend using this block when using the Long Story Short theme.

I have attached screenshots of the code to help explain how the parallax effect covers the background image.
hive replied on at Permalink Reply
A bit late reply from my side but I did neglect this project a bit.

Thank you for your help I might do it with parallax turned off.


So in order for both to work I would have to remove white background from the theme's code?
MrKDilkington replied on at Permalink Reply
MrKDilkington
I don't think the parallax effect and full screen background image can both work at the same time. The parallax effect images and background color sit on top of the background image.

The web page examples you provided have changed. They now appear to have parallax effect disabled. Without the parallax effect, the background is now visible.
hive replied on at Permalink Reply
Ah ok, I get it. No problem I will have to work around it then.

Yes I have turned off parallax in order to play with background images only for now.

Thank you for your help.

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.4.2
Version Installed - 5.7.4.2
Database Version - 20150504000000

# concrete5 Packages
Background Image and Overlay (0.9.4), Long Story Short (1.0), Power Slider (1.0), Ronyd Expanded Search Bar (2.0), Sassy Maps (0.9.7), Share Me (0.9.1), Woofu Forms (2.0.0).

# concrete5 Overrides
languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/sl_SI/LC_MESSAGES/messages.mo, languages/sl_SI/LC_MESSAGES, languages/sl_SI, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/sl_SI/LC_MESSAGES/messages.mo, languages/sl_SI/LC_MESSAGES, languages/sl_SI, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Microsoft-IIS/8.5

# Server API
cgi-fcgi

# PHP Version
5.3.28

# PHP Extensions
bcmath, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, filter, ftp, gd, gettext, hash, iconv, imap, json, libxml, mbstring, mcrypt, mhash, mysql, mysqli, mysqlnd, odbc, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, Reflection, session, SimpleXML, soap, SPL, standard, tidy, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, zip, zlib.

# PHP Settings
max_execution_time - 300
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 128M
post_max_size - 8M
safe_mode - Off
safe_mode_exec_dir - <i>no value</i>
safe_mode_gid - Off
safe_mode_include_dir - <i>no value</i>
sql.safe_mode - Off
upload_max_filesize - 2M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
odbc.max_links - Unlimited
odbc.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 1440
soap.wsdl_cache_limit - 5
safe_mode_allowed_env_vars - PHP_
safe_mode_protected_env_vars - LD_LIBRARY_PATH

Browser User-Agent String

Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.