Jump to content

[Solved] CSP & inline styles


Recommended Posts

I have pages with a masthead image that is loaded to a background using inline styles. They are dynamic depending on the page. The problem is that with CSP I can't use inline styles, therefore I lose the ability to load the background image dynamically as we can't use php in the css file where you would normally move the inline style to. I am checking flexbox at the moment, and have looked at a div with the image covering the whole visible area on a different z-index level, but that is ugly and doesn't work consistently... The reason that I need it as a background is because I have content (text) over.

Any ideas appreciated.

Link to comment
Share on other sites

What about this:

<div class="masthead" data-bg="<?php echo $page->mastheadImage->url; ?>">
  <span>My Text Above Image</span>

and this:

$(document).ready(function() {

    $('[data-bg]').each(function() {
        $(this).css('background-image', 'url(' + $(this).attr('data-bg') + ')');



  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...