Image overlay in different levels on the elemental

Permalink Browser Info Environment
Hi, I do the administration of marnan.nl where the owner would like to have something like here:http://termitescooloola.com/pestcontrol/...

using the elemental theme. I tried adding it but the image goes always at the very back layer and as a result it cannot be seen at all, except if you force scrolling up then you can see a pinkish behind everything. Is there a way to choose how much forward i bring the image without overriding the concrete5 theme?

Thanks!

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

The website example you posted is using the Spacer add-on to create a div with a height and a transparent background. The transparent background, allows the background image to be visible.
https://www.concrete5.org/marketplace/addons/spacer1...

The background image displays behind other page elements because of its z-index. It has a z-index of -2. The other page elements do not have a z-index set, so they have the default z-index of 0.

Depending on where you need to allow the background image to be visible, you will most likely need to add a div and some CSS to give the div height and remove its background.
vasileiosg replied on at Permalink Reply
vasileiosg
Thank you so much. To be honest with you, i have no clue what I need to do. I understand CSS as a concept and that's it. I know this is not part of your scope, but perhaps you could point me to a direction where i could understand how to apply custom CSS on concrete5?

Thanks in advance!
MrKDilkington replied on at Permalink Reply
MrKDilkington
@vasileiosg

What is the address of your website?

Where on the website are you looking to show the image?
vasileiosg replied on at Permalink Reply
vasileiosg
http://www.marnan.nl

As an example, between the menu and the welcome. i have added already the spacer and that's why there is a gap there now.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@vasileiosg

I am afraid this will require modifying a theme template to accomplish.

This would involve:
- downloading the Cloneamental theme
- within the Cloneamental theme, copying the default.php template and saving a copy as home.php
- in home.php, you would add a <div> element above <main>
<div class="background-spacer"></div>

- install and activate the modified Cloneamental theme
- in the page settings for the home page, you would change the template to "Home"
- in the Custom CSS for the home page, you would add CSS to give the "background-spacer" class height
.ccm-page .background-spacer {
    height: 200px;
}

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.5.9
Version Installed - 5.7.5.9
Database Version - 20160615000000

# concrete5 Packages
Background Image and Overlay (0.9.7), Cloneamental (0.9.1), Customize Editing Interface (0.9.3), Deluxe Customizable Twitter Feed (0.9.7), DiscussionES Facebook Comments (1.1), Page Redirect (2.0), Page Selector Attribute (2.0), Styled Maps (1.2.0), Thumb Gallery (1.0.3).

# concrete5 Overrides
languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/site/nl_NL.po, languages/site/nl_NL.mo, languages/site, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/en_US, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/site/nl_NL.po, languages/site/nl_NL.mo, languages/site, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/en_US, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT

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

# Server Software
Apache

# Server API
fpm-fcgi

# PHP Version
5.5.35

# PHP Extensions
bcmath, calendar, cgi-fcgi, Core, ctype, curl, date, dba, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imagick, imap, json, ldap, libxml, mbstring, mcrypt, mysql, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite3, standard, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend OPcache, zip, zlib.

# PHP Settings
max_execution_time - 86400
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 86400
max_input_vars - 1000
memory_limit - 128M
post_max_size - 2047M
sql.safe_mode - Off
upload_max_filesize - 2047M
ldap.max_links - Unlimited
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.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
opcache.max_accelerated_files - 4000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/601.7.8 (KHTML, like Gecko) Version/9.1.3 Safari/601.7.8

Hide Post Content

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

Hide Content

Request Refund

Click below to request a refund for License #7904008. Assigned to Marnan.
Created on Mar 23 2016 at 3:03 pm
.