How to place an image in an HTML button

Question

I am creating a button on a given page and would like to put a background image.

I’m trying to tag background-image:url() in CSS but not working.

HTML:

@model WebApplication3.Models.Comercial.ComercialModels

@{
    ViewBag.Title = "Index";
}
<div id="Open_menu">
    <span onclick="openNav()">Menu</span>
</div>

<h2>Comercial</h2>

<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">@Html.ActionLink("Home", "Index", "MenuInicial")</a>
    <a href="#">@Html.ActionLink("Serviços", "Index", "Servicos")</a>
    <a href="#">@Html.ActionLink("Comercial", "Index", "Comercial")</a>
    <a href="#">@Html.ActionLink("Estoque", "Index", "Estoque")</a>
    <a href="#">@Html.ActionLink("Equipamentos", "Index", "Equipamentos")</a>
    <a href="#">@Html.ActionLink("Compras", "Index", "Compras")</a>
    <a href="#">@Html.ActionLink("Fiscal", "Index", "Fiscal")</a>
    <a href="#">@Html.ActionLink("Caixa", "Index", "Caixa")</a>
</div>

<div>
    <input type="button" class="but_clientes">
</div>

CSS:

/*botao abrir menu lateral*/

#Open_menu {
    position: fixed;
    cursor:pointer;
    margin-left: -150px;
    margin-top: 350px;
    font-size: 20px;
    transform: rotate(270deg)
}

.but_clientes {
    width: 300px;
    height: 100px;
    background-color: transparent;
    background-image:url('C:\clientes.png');
    border: groove
}

Canvas:

Project hierarchy:

Update, A folder has been created in the project called Image but it still didn’t work:

Answer 1

Try it this way :

<input type="image" src="http://www.drpeppersnapplegroup.com/smedia/www/2013/04/17/img-volunteer-button_163957695590.jpg" alt="Submit" width="110" height="40">

Answer 2

In the case of a website, files cannot be served from your local system. First, because the system where the site will be hosted will not (certainly) have the same system as yours (it may, for example, not exist c:\). Second because, in case you are making an application that you want to only run in your browser at home, it is a security system in the new browsers.

To be right, you have to create a folder in your project that will be served by the server, for example Images, and point the images there. ex: background-image:url(Images/image.ext)

If, however, you want the second option and don’t have a server serving the index.html You have to go find the flag of the browser you use; Make a new shortcut for the browser and in the call parameters include that same flag. In Chrome’s case, it’s --allow-file-access-from-files.