Background Image On Header - Question | JoomShaper

Background Image On Header

S

sps737

Helix Framework 1 month ago

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)?

1
6 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #151483

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.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 month ago #151508

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

1
S
sps737
Accepted Answer
1 month ago #151521

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.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 month ago #151522

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

1
S
sps737
Accepted Answer
1 month ago #151531

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!!!

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 month ago #151564

Thanks for your appreciation and Glad that I could help:)

Have a nice day!

0