Why isn't the background image for my button appearing when set using a CSS rule? I have a button with the class "todo" and although other parts of the rule work, the image itself does not show up even after trying "background: url" and "background-image: url".
The reason behind this issue is that I am working on building a todo list where the button images should change based on whether they are marked complete or incomplete.
My plan is to create two different CSS rules with separate classes, each having their own button background image (one for complete and one for incomplete). When an item is marked as complete, JavaScript will be used to change the item's class name to match the CSS rule for completed items.
If anyone has any suggestions for an easier way to achieve this, please feel free to share.
HTML:
.todo{
background-image: url("../img/check.png");
width:50px;
height:50px;
} <html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
<link rel="stylesheet" type="text/css" 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>