Can you put an image on top of a button or in the background?

Question

Can you put an image on top of a button or in the background?

Navigation

#1 by (1 votes)
#2 by (1 votes)

-3

<!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="200px";   //size   

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

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

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

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

html

asked by anonymous 02.08.2018 / 02:09

2 answers

help on request Fill in a multiline-textbox with all the items in the list of a combobox

score 1 · Answer 1

Pure inline CSS - style="background-image:url('endereçoImagem');

 <button style="background-image:url('https://i.stack.imgur.com/A8KVP.png'); width:250px; height:250px; font-size: 200px; color:red; background-color: transparent; border-radius: 50%; outline:none" id="bcen" onclick="if(--this.textContent<=0) alert('You\'ve won!');" value="10">10</button>

score 1 · Answer 2

Just set backgroundImage property, remember that its value must always be 'url(exemplo.png)'

<!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>
    //Fundo no corpo da página
    document.body.style.backgroundImage = 'url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNylMnVaVWb0dAzVvBOxf8BiyTGlS8WK_3UZ1l2G0Ut0WfFb_Y)';

    document.getElementById("bcen").style.width = "300px"; //Size
    document.getElementById("bcen").style.height = "300px"; //Size
    document.getElementById('bcen').style.fontSize = "200px"; //size   
    document.getElementById('bcen').style.color = 'red'
    document.getElementById('bcen').style.backgroundImage = 'url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxcBMtRs4ePVWb1m3pTBeALxaO_jIDZMMeTccOW-F7rCN4krU)';    document.getElementById('bcen').style.backgroundColor = 'transparent';
    document.getElementById('bcen').style.borderRadius = "50%";
    document.getElementById('bcen').style.outline = "none";
  </script>
</body>
</html>

One note, as you are making several changes to the same element, it is advisable to save the reference to this element in a variable, see how the code gets smaller, cleaner and simpler to understand:

<!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>
        //Fundo no corpo da página
        let body = document.body;
        body.style.backgroundImage = 'url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNylMnVaVWb0dAzVvBOxf8BiyTGlS8WK_3UZ1l2G0Ut0WfFb_Y)';
      
        let btn = document.getElementById('bcen');
        btn.style.width = "300px"; //Size
        btn.style.height = "300px"; //Size
        btn.style.fontSize = "200px"; //size   
        btn.style.color = 'red'
        btn.style.backgroundImage = 'url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxcBMtRs4ePVWb1m3pTBeALxaO_jIDZMMeTccOW-F7rCN4krU)';
        btn.style.backgroundColor = 'transparent';
        btn.style.borderRadius = "50%";
        btn.style.outline = "none";
      </script>
    </body>
    </html>