Ruby on rails 5.2 - background image with active storage

2
votes

I upgraded my app to rails 5.2 and I am using the active storage of rails.

In case I want to use the picture I uploaded as a background, which method is the best? I would like to use a resized picture 300x300 for the background.

<div style="background: ... ">
2
ruby-on-railsimagebackground

2 Answers

3
votes
<div class="index-img">
    <div class="bg-img" style="background-image: url(<%= rails_blob_url(@user.avatar) %>)"></div>
</div>

then can style it in css like

.index-img{
    position: relative;
    width: 100%;
    height: 250px;
    background: $grey;
}
.bg-img{
    width: 100%;
    height: 100%;
    @include background-image();
}
-1
votes

You can write css on page itself like below. Then use in div.

<style media="screen">
  #div_id { background-image: url(<%= image_path @user.avatar.variant(resize_to_fit: [300, 300]) %>) !important;
  ......
  }
</style>

<div id="div_id">...</div>