How do I put an image in place of the black button? Example: a coin?

Question

How do I put an image in place of the black button? Example: a coin?

Navigation

#1 by (1 votes)

1

document.getElementById("bcen").style.width = "300px"; //Size

document.getElementById("bcen").style.height = "300px"; //Size
    
document.getElementById('bcen').style.fontSize="100px";   //size   
    
document.getElementById('bcen').style.color = 'white' 
    
document.getElementById('bcen').style.backgroundColor='black';
    
document.getElementById('bcen').style.borderRadius = "50%";
    
document.getElementById('bcen').style.outline = "none";

<button id="bcen" onclick="if(--this.textContent<=0) alert('You\'ve won!');"  value="10">10</button>

html

asked by anonymous 29.07.2018 / 04:30

1 answer

Problem in programming C - Vectors Problem executing a shell script using Zenity. Message: Gtk-Message: GtkDialog mapped without a parent transient. This is discouraged

score 1 · Accepted Answer

You can even leave the line below if you want the element also to have a background color:

document.getElementById('bcen').style.backgroundColor='black';

But also add:

document.getElementById('bcen').style.backgroundImage='url(CAMINHO DA IMAGEM)';
document.getElementById('bcen').style.backgroundSize='cover';

The style.backgroundImage will insert a background image and style.backgroundSize='cover'; will cause the background image to occupy the entire element.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <button id="bcen" onclick="if(--this.textContent<=0) alert('You\'ve won!');"  value="10">10</button>
    <script>
    document.getElementById("bcen").style.width =
"300px"; //Size
    document.getElementById("bcen").style.height =
"300px"; //Size

document.getElementById('bcen').style.fontSize="100px";   //size   

document.getElementById('bcen').style.color = 'white' 

document.getElementById('bcen').style.backgroundColor='black';
document.getElementById('bcen').style.backgroundImage='url(https://i.ebayimg.com/00/s/MzAwWDMwMA==/z/~z8AAOSwEK9UIcNC/$_35.JPG?set_id=2)';
document.getElementById('bcen').style.backgroundSize='cover';

document.getElementById('bcen').style.borderRadius = "50%";

document.getElementById('bcen').style.outline = "none";
      </script/>
    </body>
</html>