Изображение на кнопке фона

У меня есть небольшая проблема с файлом css. Я создаю hmtl-файл и стиль файла css, и моя идея ставится на фоне кнопки с изображением. Когда я использую файл css не работает, но я использую параметр стиля кнопки, работает нормально, я не понимаю.Изображение на кнопке фона

Мой HTML/код CSS заключается в следующем:

@charset "UTF-8"; 
 

 
/* CSS Document */ 
 

 
body { 
 
    text-align: center; 
 
} 
 
.btn-image { 
 
    width: 300px; 
 
    background-image: url('/images/ok/login-login-on.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
}

<!doctype html> 
 
<html> 
 

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

 
<body> 
 
    <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">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;">Login</button> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Помогите мне, пожалуйста,)

источник

2016-09-22 ruzD

Возможно, ваш файл CSS находится в другом каталоге, поэтому вам нужно будет изменить путь к файлу в url – Johannes

, пожалуйста, введите некоторую высоту в .btn-image css class –

Я проверил путь к файлу css, и это ОК! – ruzD

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

источник

2016-09-22 13:35:22 Teejten

Это не так. Я попытался поместить изображение в корневой путь проекта без .../.../... только имя файла и это скопированное на текущем пути. – ruzD

Если все остальное не удалось установить ваш фоновый размер: 100 пикселей; так что он напоминает рабочий фрагмент. – Teejten

Решено! Спасибо Teejten! – ruzD

Если файл CSS находится в каталоге на том же уровне в качестве каталога image, ваш файл-путь должен быть

background-image: url('../images/ok/login-login-on.png');

источник

2016-09-22 13:37:45 Johannes

Изображение на кнопке фона

ответ

Смежные вопросы