oscarruz oscarruz - 3 months ago 17
CSS Question

HTML & CSS - Image at background button

I have a little problem with the css file. I create a hmtl file and css file style and my idea is put in the background of the button form an image. When I use the css file doesn't work but I use the style parameter of the button is working fine, I do not understand.

My html code is this:

<!doctype html>
<meta charset="UTF-8">
<title>Test - Log in</title>
<!-- Bootstrap -->
<link href="assets/css/style.css" rel="stylesheet">

<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<img src="images/ok/Logo.png" width="200" height="200" alt=""/> <br></br>
<div class="box-center">
<form action="connectdb.php" method="post">
<input type="text" class="txtbox-login-image" placeholder="Usuario" name="username" required autofocus>
<input type="password" class="txtbox-password-image" placeholder="Password" name="password" required>
<!-- This option is not works -->
<button class="btn-image" type="submit"></button>
<!-- This option is works -->
<button style="background-image: url('images/ok/login-login-on.png'); width: 100px; border: 1px solid #fff; margin: 0 auto; display: block;"></button>

The css document:

@charset "UTF-8";
/* CSS Document */
text-align: center;

width: 300px;
background-image: url('/images/ok/login-login-on.png');
background-repeat: no-repeat;
background-position: center;

Help me, please ;)

button[type="submit"] {
    background: url('path/to/file');