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

Asked

Viewed 30 times

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

1 answer

1


You can even leave the line below if you want the element to also 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 the style.backgroundSize='cover'; will cause the background image to occupy the whole 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>

  • Beauty thanks for the help!

  • Not at all, friend!

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.