Почему не работает background-image?

Question

[Anvario0]

Файл со стилями помещён в папку css. Картинка помещена в папку images, которая находится на одном уровне с папкой css. Не выполняется свойство background-image у button с классом search__form-submit

HTML:

<section class="search">
	 		<div class="container">
	 			<div class="search__body">
	 				<form class="search__form">
	 					<label class="search__form-label">Поиск<br>Аппартаментов</label>
	 					<input type="text" class="search__form-input" placeholder="Введите город">
	 					<buttton class="search__form-submit" type="submit">Найти</buttton>
	 				</form>
	 			</div>
	 		</div>
	 	</section>

CSS:

.search {
	margin-top: 60px;
	margin-bottom: 70px;
}

.search__form {
	display: flex;
	margin-left: 483px;
	align-items: center;
}

.search__form-label {
	font-size: 24px;
	color: #888888;
	line-height: 24px;
	padding-right: 70px;
}

.search__form-input {
	height: 70px;
	width: 431px;
	font-size: 18px;
	color: #888888;
	border: 2px solid #C4C4C4;
	padding: 0 14px;
}


.search__form-input::placeholder {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 24px;
	font-size: 18px;
	color: #888888;
}

.search__form-submit {
	width: 121px;
	height: 70px;
	color: #ffffff;
	line-height: 70px;
	padding-left: 36px;
	background-image: url(../images/search.svg);
	background: #C4C4C4;
	border: 2px solid #C4C4C4;
	cursor: pointer;
}

Comments

[Alex931]

Можно попробовать внутри кнопки сделать и задать уже ему background-image.

<buttton class="search__form-submit" type="submit">
<span class="submit-icon-text">Найти</span></buttton>

.submit-icon-text {
background-image: url(../images/search.svg);
background-repeat: no-repeat;
}

Другие стили все работают?

[Anvario0]

Alex931, да. Я понимаю, что можно сделать по-другому, но я хочу понять, почему этот способ не работает

[Alex931]

Anvario0, у меня как-то тоже подобная проблема была. Решил через добавление тега span внутри button.

[Павел]

В вашем коде не работает, как минимум, потому что вы бекграунд перезаписываете

background-image: url(../images/search.svg);
  background: #C4C4C4;

Так должно работать

background-image: url(../images/search.svg);
  background-color: #C4C4C4;

[Alex931]

https://habr.com/ru/company/ruvds/blog/489820/
Хорошая статья про стили для button.

[Anvario0]

Павел, Спасибо большое, только сейчас заметил

Answer 1

[Евгений]

Потому что у тебя background: #C4C4C4 переписывает background-image.

Нужно изменить на background-color: #C4C4C4, либо поменять их местами.