Add full width soliloquy slider in header

Hey there,
I’d like to add a full width soliloquy slider as a background image in my header. I could only make it full width using a content element and some css. It filled the whole column, but I’m stuck setting the slider as a background for my whole header(2 bars).
thanks for your help!

Hello @ZerotoOneaerial,

Thanks for writing in!

If it is a slider, it is not a background image. You may use the slider as a hero banner instead. Please insert a bar with a fullwidth setting. The content length and content max length should 100%.

The z-index of the bar settings for the hero banner should be less than the z-index of the bar which contains your navigation or any other bar.

Hope this helps.

What about the text ? Will it overlay the slider just like it did with a background image? Thank you

Hi @ZerotoOneaerial,

Yes the text should overlay the slider because the z-index for the slider is less than the bar which contains the text or any other element:

Hope this helps!

Hello @ZerotoOneaerial,

if you have place the text on a separate bar, you can set the bar to have the same height as the containing the slider and make sure that the bar with the text will be on top of the other bar by setting the z-index.

Anyways, do you want to display like this?

Please set a fixed height like 100vh in your bar settings so that there will be a basis for the center point inside the column.

Hope this makes sense.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.