image_tagとbackground-image:urlを組み合わせて使いたいです。

###前提・実現したいこと
railsにおいて、背景画像をimage_tagとbackground-imageを組み合わせて表示したいです。

以下の条件を満たすためです。

【条件】
①表示する画像の縦横比は元の比と同じにすること。
②幅⁼高さ，幅≠高さ(縦長，横長)に関わらず一定の枠内に収め、余白を残さないように表示すること。

###書き出し

以下のコードだと画像が表示されません…

<div style="background-image:url('<%= image_tag(@user.image.url) %>')"></div>

上記①，②の条件を満たすためにはbackground-image:urlを使うことがベストプラクティスであるとご指摘いただきました。

###実行手順
①,link_toブロックを作成。
②,①のブロック内に<div></div>を挿入。
③,<div>内に**<%= image_tag(@user.image.url) %>を引数にとるbackground-image:url**を挿入。

①,link_toブロックを作成。

     <%= link_to current_user do %>
     <% end %>

②,①のブロック内に<div></div>を挿入。

     <%= link_to current_user do %>
           <div></div>
     <% end %>

③,<div>内に**<%= image_tag(@user.image.url) %>を引数にとるbackground-image:url**を挿入。

     <%= link_to current_user do %>
       <div style="background-image:url('<%= image_tag(@user.image.url) %>')"></div>
     <% end %>

###結果の予想
形式的には背景画像ですが、link_toブロックで囲んでいますので、実質的には、リンク画像が表示される予想です。

###実際の結果

div枠内に以下のようなリンクが出てくるだけでした。

')">

###ステップ明記

③の引数の記述方法に誤りがあると思っています。
引数を**'<%= image_tag(@user.image.url) %>'から/images/icons/hoge.png****/uploads/user/image/1/thumb_unnamed.jpg**に変換しても表示されませんでした。

image_tagとの組み合わせではなくそれ以前の問題の可能性があります…

###文献の引用
Rails4ではbackground:url("assets/hoge.png")の書き方は動かない話

私の場合は多少ケースが異なるかと思いましたが試してみました。

###環境 ――

gem 'rails', '4.2.5'
gem 'carrierwave',             '0.10.0'
gem 'mini_magick',             '3.8.0'

ご助言お願いします。

###コードまとめ

<div class="user-show-icon-cover">
 <div class="user-show-icon-information">
     <a href="" style="background-image:url(/uploads/user/image/1/thumb_unnamed.jpg)"></a>
     <%= link_to current_user do %>
     <%= image_tag(@user.image.url, :alt => "アイコン", :class => "user_show_image") %>
     <% end %>
 </div>
</div>

CSS
1.user-show-icon-cover {
2  position: relative;
3  height: 200px;
4  width: 200px;
5  border: 5px solid #000;
6  border-radius: 5px;
7  overflow: hidden;
8  box-sizing: border-box;
9}
10.user-show-icon-information 
11{
12  width: 100%;
13  height: 100%;
14}
15.user-show-icon-information a 
16{
17  display: block;
18  width: 100%;
19  height: 100%;
20  background-size: cover;
21  background-repeat: no-repeat;
22  background-position: center center;
23}
24

gin

2016/12/02 02:27

想像ですけどimage_tagってimg要素を生成するやつですよね？なので③はこうなって「<div style="background-image:url('<img src="aaaaa">')"></div>」aaaaaの後ろの「">」でdivが閉じられて「')">」がテキストとして出てるっぽいですね。