title: How to use DATA ATTRIBUTE to add background image to an anchor tag with HTML and CSS
body: <p>I am trying to add a background image to an Anchor tag when value is &quot;ENGLISH&quot; and &quot;FRENCH&quot;</p>
  <p>I was able to make it work when the echoed php value was a digit using DATA-ID this way</p>
  <p>HTML AND PHP:</p>
  <pre><code>&lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;pjMbSelectorLocale&quot; data-id=&quot;&lt;?php echo 
  $locale['id'];?&gt;&quot;&gt;&lt;?php echo pjSanitize::html($locale['title']); ?&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>li a[data-id=&quot;1&quot;]{
  background- 
  image:url(&quot;img/flags/united- 
  kingdom.svg&quot;);
  background-position: center;background-repeat: no-repeat;display: inline- 
  block;
  }
    
  li a[data-id=&quot;2&quot;]{
  background-image:url(&quot;img/flags/france.svg&quot;);
  background-position: center;background-repeat: no-repeat;display: inline- 
  block;
  }
  </code></pre>
  <p>now I am trying to do the same when the echoed value is not an ID (1 or 2) but a text (&quot;English&quot; and &quot;French&quot;) with this statement:</p>
  <pre><code>&lt;button&gt;
    &lt;a href=&quot;#&quot; data-value=&quot;&lt;?php echo $selected_lang;?&gt;&quot;&gt;&lt;/a&gt;
  &lt;/button&gt;
  </code></pre>
  <p>And I can't seem to figure out how to manipulate it in css</p>
  <p>Update: there seems to be a problem with the php, whenever I add the anchor tag, the echoed text disappears: initial php was:</p>
  <pre><code>&lt;button&gt;
  &lt;?php echo $selected_lang;?&gt;
  &lt;/button&gt;
  </code></pre>
  <p>using dev tools, I can see the value being passed into the data-value and the css going with either options. but the browser doesn't not render the text nor the image</p>
  <hr />
  <h1>Solved</h1>
  <p>Solution:</p>
  <p>the image was being hidden by a background-image:none default property and also I had to apply a height and width.</p>
  <pre><code>a[data-value=&quot;English&quot;]{
  background- 
  image:url(&quot;img/flags/united- 
  kingdom.svg&quot;);
  background-position: center;background-repeat: no-repeat;display:inline- 
  block;width: 20px;height: 20px;
  }
  </code></pre>