[Solved] CSP & inline styles

[opalepatrick]

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.

[wbmnfktr]

What about this:

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

and this:

<script>
$(document).ready(function() {

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

});
</script>

 

[opalepatrick]

Thank you very much @wbmnfktr - that worked perfectly and complies with CSP as well.

[dragan]

CSP? Content Security Policy? o_O

[opalepatrick]

Yes, sorry :-)