In my backend I have a radio button field with 2 options for the client: Normal and cover. When selecting normal, the uploaded image is put into an tag in the HTML and an image transform is applied. This works well as it should.

When selecting cover however, the uploaded image is added to a background-image inline CSS style. But the applied image transform is not generated for this. When I change the uploaded image to "normal", let it generate a transform and then put it back to "cover" only than it is shown as a background image.

So image transform doesn't seem to trigger in this code:

<div style="background-image: url('{{ block.mediaImageFile.first().getUrl('storyMediaTransform') }}'); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%;"></div>

Does anyone know why this is not working?

1 Answer 1


Try taking the apostrophes off your transform, e.g.


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.