Rameshkumar Rameshkumar - 5 months ago 76
CSS Question

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('<%=@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)

Answer

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 .