не отображается bacground-image

Question

Помогите пожалуйста, не отображается фоновая картинка в блоке. Проверял колором, работает, а вот сама картинка не отображается, ни та что в папке с проектом, ни браузерная. Может что-то недосмотрел?

html,
#about {
  width: 99.6%;
  height: auto;
  background: #f7f7f7;
  padding-top: 40px;
}

.BacgroundWall {
  margin-left: 140px;
  width: 300px;
  height: 400px;
  position: relative;
  background-color: #2B446B;
}

.BacgroundWall2 {
  margin: 20px auto;
  left: 60%;
  width: 260px;
  height: 360px;
  position: absolute;
  background-color: #F7F7F7;
  margin-left: -160px;
}

.aboutImg {
  margin: 10px 25px;
  border: 2px solid red;
  width: 300px;
  height: 400px;
  background-size: 50%;
  background-image: url("https://images.unsplash.com/photo-1551715435-55b2b13a5257?ixlib=rb-1.2.1&auto=format&fit=crop&w=1525&q=80");
  background-color: black;
}

<!DOCTYPE html>
<html>

<head>
  <title>Personal</title>

</head>

<body>

  <!-- About me-->
  <article id="about" class="paddsections">
    <div class="BacgroundWall">
      <div class="BacgroundWall2">
        <div class="aboutImg"></div>
      </div>
    </div>
    Hello
  </article>
  </section>

</body>

</html>

Answer 1

Замените ваш css для класса aboutImg на следующий:

.aboutImg {
    margin: 10px 25px;
    border: 2px solid red;
    width: 300px;
    height: 400px;
    background-image: url(https://images.unsplash.com/photo-1551715435-55b2b13a5257?ixlib=rb-1.2.1&auto=format&fit=crop&w=1525&q=80);
    background-repeat: no-repeat;
    background-size: cover;
}

background-size: cover; - адаптирует изображение под ваш контейнер (так то оно на много больше вашего контейнера, что бы оно нормально стало, лучше прописать это).

background-repeat: no-repeat; - отдельное свойство, не пихайте его в background-image. Такой синтаксис применим для общего свойства background, но не для background-image, указанного отдельно.

БЛОГ НА HUSL

не отображается bacground-image

Ответы (1 шт):