Home › Forums › Jevelin Theme › Parallax with Color Overlay
Home › Forums › Jevelin Theme › Parallax with Color Overlay
Hi,
I’m trying to create a hero section with a parallax background image. The image has a lot of colors, so I want it to have a black overlay with 70% opacity. However, the Background Color option below the Background Image doesn’t work with a parallax background image. It works with a static image, as is on my website.
Please help. Thanks!
Hi @iancdma,
I hope you are well today and thank you for your question.
I visited your shared site but didn’t see any parallax background image so could you please tell me where you are displaying it so that I can help you?
Best regards,
Shufflehound team
https://www.dropbox.com/s/0fopx5xmjuxxyvh/L0dsDHw7ge.mp4?dl=0
I am developing the website on localhost now, but I uploaded the video above so you can see. Parallax Background Image, for some reason, isn’t working with the Overlay Background Color.
These are for a Section element, under the Background configuration.
I tried to visit your shared site but it is not accessible due to sitegound optimizer assets so could you please temporarily disable it?
Also you can try achieving this using Yellow Pencil editor as described in the below page.
https://support.shufflehound.com/how-to-change-almost-any-element/
Hi! My website works fine with SG Optimizer, but I’ve disabled it for now so you can check what’s wrong. Yes, I tried doing it with Yellow Pencil, but it gave me the same results.
Now, could you please use the parallax background image and set color overlay so that I can troubleshoot it?
To make it work, please add the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.home .sh-section-overlay-front { z-index: 1; }
We only offer support from this support forum.
Solution for this topic
Thanks. What about the Vertical Column centering issue?
You can resolve it using below custom CSS code.
.section-justify-height-full .sh-column { min-height: 100vh; } .section-justify-height:not(.section-justify-height-only) .sh-column { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -webkit-flex-direction: column; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
Also, how do I add another button beside Sign Up? See attached screenshot please.
To achieve this, you have to develop custom code in the child theme of Jevelin theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
Thanks! That fixed the problem. I’m just wondering, why isn’t this already included in the theme? Or did I find bugs and you’re gonna apply these fixes in the next version?
For the second button, I’m a (junior) developer, so I guess I’ll just find my way. Thanks again.
Thanks! That fixed the problem. I’m just wondering, why isn’t this already included in the theme? Or did I find bugs and you’re gonna apply these fixes in the next version?
It is not a bug but this is intentionally displayed like that on mobile devices which is a part of responsive theme design.
Thanks for that info. Is Jevelin optimized for Pingdom, GTMetrix, Pagespeed, and the likes?
Why does the Unyson editor scroll up to the top of the page every time I edit an element and close/save?
To help us keep support thread separates could you please create a new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you with your new thread.
Issue resolved, please mark like so.
Ok. Marked the topic as resolved.