_slide.html.erb

_slide.html.erb

<div class: 'main-home-carousel__slide'>
  <%= link_to slide.link_url, title: slide.title, class: "main-home-carousel__link slide_#{slide.id}" do %>
    <span class="<%= "main-home-carousel__image slide_text_#{slide.id}" %>"></span>
  <% end %>
</div>

<%= content_for :header do %>
<style type="text/css">
  <%= ".slide_#{slide.id}" %> {
    background-image: url('<%= slide.mobile_background.url(:original) %>');
  }
  <%= ".slide_text_#{slide.id}" %> {
    background-image: url('<%= slide.mobile_text.url(:original) %>');
  }
  @media only screen and (min-width: 768px) {
    <%= ".slide_#{slide.id}" %> {
      background-image: url('<%= slide.desktop_background.url(:original) %>');
    }

    <%= ".slide_text_#{slide.id}" %> {
      background-image: url('<%= slide.desktop_text.url(:original) %>');
    }
  }
</style>
<% end %>