Question 195865 in Html Question posted in
Some basic documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    So your problem may be solved by either of this two solutions:

    1. You are serving a mix of HTTP and HTTPS content which often results to this problem. To solve this, please consider hosting the image on a local server that runs on top of HTTP to make sure that all content is hosted on HTTP so mixed content issue does not take place.
    2. You may want to consider configuring your S3 bucket’s CORS configuration to allow specific websites served from other domains to pull your image and display it.
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search