Is there a way to place an image on top of a button or in the background?

Asked

Viewed 160 times

-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

  • Kind of?

  • It didn’t work here buddy!

  • Could you update the question with your attempt?

  • Yes I got it from a look there!

  • You can help me?

  • ? I updated my brother

Show 1 more comment

2 answers

1

Just set the property backgroundImage, don’t forget that your value should 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>

A note, as you are making several changes in the same element is advisable to save the reference to that 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>

  • Opa thanks! You can do the same to put a background image?

  • That puts the background image (background-image)

  • Not so much as I put an image for the button,?

  • @20Buscar is the same thing, just change the element that will receive the fund, I edited the question with this

1

Pure CSS inline - 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>

  • @sam yes, w Numerical representation of the day of the week - 0 (for Sunday) .....

  • Leo I can do the same to put a background image?

  • @20Buscar, not understood, put where?

  • Put an image on a white background! This code you gave me was to put the image on a button right? So I also wanted to put in the background or background!?

  • @20Buscar, do you refer to putting an image as the background of a page? This also solves <body style="background-image:url('https://i.stack.imgur.com/A8KVP.png')";> Be sure to mark an answer that best answered your question as accepted. See how in https://i.stack.Imgur.com/evLUR.png

Browser other questions tagged html

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