I need help creating a header with a logo link that changes color when hovered over. To achieve this, I want to use the "background-image" property instead of placing an img tag directly in the HTML. However, I am facing issues getting my logo to display within the div.logo element. I have tried various ways of entering the path, including using a hosting URL for the image, but nothing seems to work. Can someone assist me with this?
HTML
<body>
<header>
<div class="logo"></div>
<nav>
<a href="#" title="User"><%= image_tag("new-user-icon.png", class: "user-icon") %></a>
<a href="#" title="About"><%= image_tag("about-icon.png", class: "about-icon") %></a>
<a href="#" title="Contact"><%= image_tag("contact-icon.png", class: "contact-icon") %></a>
<a href="#" title="Main Menu" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="dropdown" >
<%=image_tag("new-menu-icon.png", class: "menu-icon") %>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Assets</a>
<a class="dropdown-item" href="#">Debts</a>
<a class="dropdown-item" href="#">Incomes</a>
<a class="dropdown-item" href="#">Expenses</a>
<a class="dropdown-item" href="#">Transfers</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Account</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</div>
</nav>
</header>
...
</body>
CSS (Sass)
header {
display: inline-block;
background: rgb(125, 185, 232);
/* Gradient styles */
border-bottom: 1px solid $universal-background;
height: 55px;
width: 100%;
float: right;
margin-bottom: 0;
padding: 0;
}
div.logo {
float: left;
height: 55px;
width: 100px;
background-color: transparent;
background-image: url('https://image.ibb.co/nw64yw/logo_white.png');
}