Question 274187 in Html Question posted in
Some basic documentation can be found here.

Replace html span tag text with image

I would like to change the text "Confidențialitate & Cookie-uri" to an image (to this image) using CSS in the following code:

 <div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(37, 166, 226); color: rgb(255, 255, 255); position: fixed; font-family: inherit; width: auto; bottom: 0px; left: 20px;">
  <span id="cookie_hdr_showagain">Confidențialitate &amp; Cookie-uri</span>
</div>

on my website: link

Tags:

3

Answers


  1. 0

    Try this, and tell me if it works:

    #cookie_hdr_showagain {
  background: url(https://flexinstal.ro/wp-content/uploads/2023/10/cookies.svg);
  height: 50px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 0;
  width: 50px;
}
    <div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(37, 166, 226); color: rgb(255, 255, 255); position: fixed; font-family: inherit; width: auto; bottom: 0px; left: 20px;">
  <span id="cookie_hdr_showagain">Confidențialitate &amp; Cookie-uri</span>
</div>
    Login or Signup to reply.
  2. 0

    CSS provides a mechanism to replace the contents of an element directly with an image using content: url(...) so:

    #cookie_hdr_showagain {
  content: url('https://flexinstal.ro/wp-content/uploads/2023/10/cookies.svg')
}
    <div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(37, 166, 226); color: rgb(255, 255, 255); position: fixed; font-family: inherit; width: auto; bottom: 0px; left: 20px;">
  <span id="cookie_hdr_showagain">Confidențialitate &amp; Cookie-uri</span>
</div>
    Login or Signup to reply.
  3. 0 
    #cookie_hdr_showagain {
  background: url(https://flexinstal.ro/wp-content/uploads/2023/10/cookies.svg);
  width: 50px;
  height: 50px;
  display: block;
  background-size: cover;
  font-size: 0px;
}
    <div id="cookie-law-info-again" data-nosnippet="true" style="background-color: rgb(37, 166, 226); color: rgb(255, 255, 255); position: fixed; font-family: inherit; width: auto; bottom: 0px; left: 20px;">
  <span id="cookie_hdr_showagain">Confidențialitate &amp; Cookie-uri</span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search