background-image:url not working for amazon s3 image

Question

What i want

I am trying to set background image for class , the image stored on amazon s3, i am accessing the image through paperclip object on rails

css class

.user-area{
    background-image:url('<%=@user.background_image.expiring_url %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

Out put on the browser

.user-area{
    background-image:url('https://xyz-customers.s3.amazonaws.com/photos/7/superbackground.jpg?AWSAccessKeyId=xxxxxxxxxxxxx&amp;Expires=1402511741&amp;Signature=xxxxxxxxxxxxxxxx');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

The problem

The image is not visible on the browser , but when i visit the amazon s3 url,(that is generated on the css class) i can able to view the image.

and the browser also throws an 403 error for this file, is a Failed to load resource: the server responded with a status of 403 (Forbidden)

Hi andi, thank you for your quick reply, actually originaly i was edited the URL before posting this question here, because the url has access key and and id of AWS S3 account, it cannot be public., — Rameshkumar, Jun 11 '14 at 18:20
if you can replicate the issue using a public image, please put up a fiddle. Otherwise, nobody will be able to help you if the problem is specific to an image that nobody else can access. — andi, Jun 11 '14 at 18:26
@andi, believe me the image is there , right now i don't have the access for AWS to change the image to public image, i am working for a client. — Rameshkumar, Jun 11 '14 at 18:35
@Rameshkumar did you find a better way to fix this bug.If yes please let me know — Dtheekshana, Jul 27 '21 at 17:56

score 12 · Accepted Answer · answered Jun 12 '14 at 07:57

i finally resolved this issue by make this change on my css code

Before change

.user-area{
     background-image:url('<%=@user.background_image.expiring_url %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

After change

.user-area{
        /*I remove the code for background-image:url and make it as inline css on my div*/
        background-repeat:no-repeat;
        width:1025px !important;
        margin-top:100px !important;
    }

And i moved the background-image property alone from class and added directly as inline css to my div, then it works like charm..

<div class="user-area" style="background-image: url(<%= @user.background_image.expiring_url %>)">
</div>

I am not saying this is best solution but it is enough for my code workflow .

That works well. Thank you for posting it. Does anyone know why it behaves this way? Seems strange. — Loubot, Jan 24 '15 at 22:24
Works for me as well. I think this has to do with the AWS access management. Inline it loads it directly from your app, in CSS it loads it from outside. So you could also solve this to changing your permissions in AWS. But your solution is perfect for me. — almo, May 05 '19 at 13:45

score 1 · Answer 2 · answered Jun 11 '14 at 21:47

Make sure you're setting the height of the image. If the height of .user-area isn't set, it would default to height: 0 and have no area to show a background in.

.user-area {
    background-image:url('<%=@user.background_image.expiring_url %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
    height: 100px;
}

score 1 · Answer 3 · edited May 23 '17 at 12:15

1

Solution! You need to set a CORS header on your S3 Bucket. See here: S3 - Access-Control-Allow-Origin Header

Someone please correct me if I'm wrong, but since I'm serving S3 content directly to the browser, this is the necessary and permissible configuration:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

edited May 23 '17 at 12:15

Community

1
1

answered Jul 08 '15 at 23:47

northben

5,448
4
35
47

Yes, url from css file, can read from from asset directories only. To read from S3 region database, you need to do above. Thanks! – ray Oct 25 '18 at 08:10
@northben Do you have json format of this code – Dtheekshana Jul 29 '21 at 15:17

score 0 · Answer 4 · answered Jun 15 '16 at 07:18

0

I had the same issue and used raw to not escape the image url special characters (probably because of the way we setup our S3 buckets).

Try this:

background-image:url('<%=raw @user.background_image.expiring_url %>');

answered Jun 15 '16 at 07:18

simonvandyk

41
4

1

Just be aware you could be opening a security hole? Wasn't an issue with me as backoffice admin users uploaded these images. – simonvandyk Jun 15 '16 at 07:22

score 0 · Answer 5 · answered Mar 02 '18 at 23:14

When hosting my image in my rails app, I was referencing it in the stylesheet as:

image-url("image-name.png")

which also could be expressed as

url("image-name.png")

but when referencing the image hosted on AWS, the below was the only one of those two options that worked:

url("image-name.png")

score 0 · Answer 6 · answered May 07 '20 at 07:05

I resolved it using raw method in background-image css: Using raw method will remove the extra added amp; which gets added up when the url is given in css stylesheet:

Below is the code for this:

.user-area{
    background-image:url('<%= raw(@user.background_image.expiring_url) %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
}

score 0 · Answer 7 · answered Sep 01 '21 at 13:35

0

I had the same problem. But then I went to S3 console, checked the tick box for the image, and selected action "Make Public" and it worked.

answered Sep 01 '21 at 13:35

Wei

1

Please add further details to expand on your answer, such as working code or documentation citations. – Community Sep 01 '21 at 14:00

background-image:url not working for amazon s3 image

7 Answers7

Linked