CODEWITHSUNDEEP
htmlcssruby-on-railsamazon-web-servicesamazon-s3
Rameshkumar
Rameshkumar

Reputation: 161

background-image:url not working for amazon s3 image

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('<%[email protected]_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)

Upvotes: 3

Views: 9033

Answers (7)

Wei
Wei

Reputation: 1

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.

Upvotes: 0

Praman Satya
Praman Satya

Reputation: 3

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;
}

Upvotes: 0

AliInvestor
AliInvestor

Reputation: 143

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")

Upvotes: 0

simonvandyk
simonvandyk

Reputation: 41

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 %>');

Upvotes: 0

northben
northben

Reputation: 5588

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>

Upvotes: 1

Rameshkumar
Rameshkumar

Reputation: 161

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

Before change

.user-area{
     background-image:url('<%[email protected]_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 .

Upvotes: 12

totbar
totbar

Reputation: 96

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('<%[email protected]_image.expiring_url %>');
    background-repeat:no-repeat;
    width:1025px !important;
    margin-top:100px !important;
    height: 100px;
}

Upvotes: 1

Related Questions