How to use image URL in custom Views?

Question

I use the Image URL Formatter module for my custom Views. The Views settings look like so:

Setting field:

Setting custom text:

This is the result I get:

Inspect html

<div class="views-field views-field-nothing"><span class="field-content">
<div>
http://example.com/sites/default/files/color-placeholder/team-1.jpg
)"&gt;
  <ul class="social-team"><li><a class="fa fa-facebook" href="#"></a></li>
    <li><a class="fa fa-instagram" href="#"></a></li>
    <li><a class="fa fa-twitter" href="#"></a></li>
    <li><a class="fa fa-github" href="#"></a></li>
    </ul>
  <a href="/md8/features/kate-benke" hreflang="en">Kate Benke</a>
  Back-End Developer
</div>
</span></div>

How should I correct my config to use mage URL?

Note: I don't want override template.

Answer 1

Views field strips out <div style=".."> tag. To add background image you need to follow below steps:

1. Add global custom field into view header and put below code.

<style type="text/css">
    .background-img { 
      background: url('{{ field_photo_team }}'); 
    }  
</style>

2. Now assign background-img class to Global :Custom text field like

.

<div class="background-img">
{{ field_social }}
{{ title}}
{{ field_profession_team }}
</div>

Note: Use Global Text Area in view header and select an input filter where html tags aren't limited i.e. full html text format