My slideshow is working but it is not in the background -- I am using paragraphs that I thought would make it easier for my client to add new images - the "flexslider" is in the header and I did create a twig template to put it in the background - "paragraph-frontage-flexslider.html.twig" ; the "flexslider" is there but not in the background (I modified a slideshow background twig that I found)

[section class="region-header.outer-wrapper" style="background-image: URL('{{file_URL(content.field_background_flexslider_imag['#items'].entity.uri.value)}}');"]
  [div class="overlay"][/div]

Any help would be most appreciated!

1 Answer 1


Flexslider is a javascript library that makes a bunch of changes to the markup once it is loaded. Instead of trying to put the images in as background images I suggest using position: absolute on either the flexslider itself, or the items you want to sit on top of it.

You may also need a z-index on some items to bring the to the front or send them to the back.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.