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!
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 |
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!
Thanks in advance!
@vasileiosg
What is the address of your website?
Where on the website are you looking to show the image?
What is the address of your website?
Where on the website are you looking to show the image?
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.
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.
@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>
- 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
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; }
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.