Rails 4 - dynamic background image

Question

I'm trying to make a rails 4 app, using a dynamic background image.

I've read several posts on SO that say it's best not to defined the object in the css file because it doesnt cache. I've tried to define it in my show page as follows - however nothing renders.

<div class="col-md-5 col-lg-4 vc-photo" style= 'background-image: url(<%= image_url @profile.user.avatar.profile.path if @profile.user.avatar? %>);' }>&nbsp;</div>

I have also tried (swapping path for url):

<div class="col-md-5 col-lg-4 vc-photo" style= 'background-image: url(<%= image_url @profile.user.avatar.profile.url if @profile.user.avatar? %>);' }>&nbsp;</div>

When I try inspecting the element in the code inspector, I can see:

<div class="col-md-5 col-lg-4 vc-photo" style="background-image: url();" }="">&nbsp;</div>

Does anyone see what I've done wrong?

Answer 1

This should work mate

<div id="profile-photo" style="background-image: url(/assets/<%= @user.image.url(:thumb) %>)">

Replace the url with your own and do not use image_tag because you only want the url not an image.

Answer 2

<div class="col-md-5 col-lg-4 vc-photo" style="background-image: url(<%= image_tag @profile.user.avatar.url if @profile.user.avatar.file? %>);">&nbsp;</div>

Try this if it works.

Edit

<div class="col-md-5 col-lg-4 vc-photo" style="background-image: url(<%= image_tag @profile.user.avatar.url if @profile.user.avatar? %>);">&nbsp;</div>

Try it without the file

I found this that should help you: background images with carreirwave