How can I use helix ultimate template to insert a background image or background video into the component area so that it also appears in the header and behind a transparent menu (e.g. in the yoga template)?
Solved
Helix Framework
Background image on header
Accepted answer
Marked as the solution
Rashida Rahman Staff
Hi,
Please try the following code snippet in your custom CSS:
#sp-header {
background: transparent !important;
}This should help:)
Here is all about custom code placement in Helix Ultimate: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
Best Regards
4 more replies
Mehtaz Afsana Borsha Staff
Hi
Thanks for contacting us. Sorry there is no default option to do that. You have to customize it yourself as we do not ptovide customization support.
-Regards.
Rashida Rahman Staff
Hi there!
Thanks for reaching out to us.
If you want it for whole page then you can choose background image in the main body section within the layout tab of your template options. Sample screenshots:
https://share.cleanshot.com/jD5FfsJ0
https://share.cleanshot.com/7rRFmJ6Q
https://share.cleanshot.com/68vJY2bY
If you want it just like Yoga template then setting background image for only the first section right after the header will do the job for you. You might need to adjust the top margin/padding of the main body section to appear it start from the very top and seems behind the Header and the header background color need to set as transparent as well.
Best Regards
Schulze Asked this
I suspect that the basic setting of the background color in the Helix ultimate template is not transparent, but white. If I do not enter a color in the section, the default color is #rrggbb and it should be transparent. But I think that in this case, if no color is specified, it is not transparent, but white. Presumably this is what it says in the template files. If I try to enter a transparency, e.g. (255, 255, 255, 0.1), the template converts the input to #FFFFFF. Therefore I don't think it is possible to display a background image behind the sections header, logo etc. because it is not transparent.
Schulze Asked this
I forgot to delete colors in "Presets - Header". Delete color in layout only is not enough. Now it works!!! Thank you very much. Your forum support is great!!!
Rashida Rahman Staff
Thanks for your appreciation and Glad that I could help:)
Have a nice day!
Log in to reply.