Try to search your question here, if you can't find : Ask Any Question Now ?

Background image on button does not appear

HomeCategory: stackoverflowBackground image on button does not appear
Avatargaurav asked 6 days ago

Im trying to set a background image for a button using a CSS rule but the image doesn’t appear.
The button is the one with the class of “todo”. The other parts of the rule work because the width and height of the buttons respond accordingly when adjusted but the image does not appear.

I have tried using both “background: url” and “background-image: url” with no results.

The reason for all this is because Im trying to build a todo list and have the button images change depending on if it has been marked complete.

To do this, my plan is to make two different CSS rules with different classes each with their own button background image(one for complete, one for incomplete). When someone marks the item as complete, Im going to add js that changes the items class name to one that matches the css rule for items marked complete.

If anyone knows of an easier way of doing this part suggestions are welcome.

HTML:

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet"  href="Resources/CSS/reset.min.css">
    <link rel="stylesheet"  href="Resources/CSS/style.css">
  </head>
  <body>
    <div class="container">
       <header>
           <input type="text" id="input" placeholder="Add an item"/>
           <button id="button"  type="button">Add item </button>
        </header>
           <div id="list">

     <!–– Below li is a template literal added with js. ––>

              `<li>
                <div class="item">
                   <div class="complete">
                    <button id="complete" class="todo">Complete</button>
                   </div>

                   <p class="text">${value}</p>

                    <div class="remove">
                       <button id="` + randomId  +`" class="todo"></button>
                    </div>
                 </div>
               </li>`;

            </div>
        </div>
     <script src="resources/JS/app.js"></script>
  </body>
</html>

CSS:

.todo{
  background-image: url("../img/check.png");
  width:50px;
  height:50px;
}
1 Answers
Best Answer
Avatarnaveen answered 6 days ago
Your Answer

1 + 1 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com