Почему картинки не отображаются как background?

Question

[lenxs]

lenxs.beget.tech

<section id="future" class="future">
		<div class="container">
		<h2 class="section-title">Что меня ждет впереди
		</h2>
		<div class="myambitions">
		
		<div class="ambition">
			<h3 class="ambition-title">Свободное время</h3>
		<p class="ambition-text">Мне нужно свободное время на семью и самое настоящее</p>
		</div>

		<div class="ambition ambition-travel">
			<h3 class="ambition-title">Яркие путешествия</h3>
		<p class="ambition-text">Работать откуда угодно - что может быть лучше?</p>
		</div>

		<div class="ambition ambition-make">
			<h3 class="ambition-title">Создание ценности</h3>
		<p class="ambition-text">Нет ничего сильнее, чем жить не просто так, создавая ценность</p>
		</div>
		
		</div>	
		</div>
	</section>

.future {
padding-top: 100px;
padding-bottom: 113px;
}

.section-title {
font-size: 30px;
text-align: center;
}

.myambitions {
display: flex;
justify-content: space-between;
margin-top: 75px;
}

.ambition {
width: 305px;
background: url('../img/icon1.png') no-repeat top;
padding-top: 90px;
text-align: center;
}

.ambition-title {
font-size: 19px;
}

.ambition-text {
margin-top: 7px;
}

.ambition-travel {
width: 270px;
background: url('../img/icon2.png') no-repeat top;
}

.ambition-make {
background: url('../img/icon3.png') no-repeat top;
}

Comments

[D1ZZNET]

Проверь путь картинки!

Answer 1

[Виталий Киренков]

Потому что путь к картинке неправильный. Ошибка об этом есть в консоли.

Answer 2

[FeST1VaL]

Проверьте путь до картинки, сейчас он у вас lenxs.beget.tech/css/img/icon1.png и в консоли есть ошибка что он не может загрузить данные картинки

Comments

[lenxs]

проверила, теперь и не отображается, и вся структура посыпалась
.ambition {
width: 305px;
background: url('../lenxs.beget.tech/public_html/img/icon1.png) no-repeat;
padding-top: 90px;
text-align: center;

[FeST1VaL]

lenxs, Короче говоря это 100% проблема с путями до картинки.

background: url('../lenxs.beget.tech/public_html/img/icon1.png) no-repeat;

так точно не правильно. Прочитайте про "../"

Попробуйте так:
background: url('/img/icon1.png) no-repeat;

[lenxs]

Артем Будин, спасибо.
Хех, нашла свою ошибку, такую тупую ошибку - в директории название было icons1.png, мда

[FeST1VaL]

lenxs, ну я выше изменил немного коменты))) пока менял вы уже ответили) ну так навсякий случай посмотрите)

Answer 3

[Владимир Майструк]

У тебя написано background: url('../img/icon2.png') no-repeat top; но надо что бы код работал background: url('../img/icon2.png') no-repeat center top;