Cloudfront distributed image shows when entered as regular image, but not as a background image

Question

I want to use a background image on my simple webpage. It's currently uploaded to S3 and distributed via Cloudfront.

If I include:

<img src="https://d1z230vfguramf.cloudfront.net/Image_Assets/test-image.png">

it displays as one would expect.

using:

<div style="background-image=url('https://d1z230vfguramf.cloudfront.net/Image_Assets/test-image.png')">
</div>

The image is not visible. Any thoughts as to why this could be happening?

Answer 1

This seems to be an issue of CSS than AWS. The way you are using background-image is wrong and will not work.

• Wrong => background-image=url('https://example.com/image.png')
• Right => background-image: url('https://example.com/image.png') // use colon

If this does not work even, then try to add some height and width to the div to make sure it's not a CSS issue.

<div style="height: 200px;width: 200px; background-image:url('https://d1z230vfguramf.cloudfront.net/Image_Assets/test-image.png');">
</div>