Почему фоновое изображение не отображается?

Question

Мой HTML-код показан ниже:

<div class="content-wrapper">
  <div class="center">
    <h1>heading</h1>
  </div>
  <div class="lr">
    <p> paragraph </p>
  </div>
</div>

, а раздел содержимого-оболочки в .css выглядит следующим образом:

.content-wrapper{ 
    background-image: url(/picture.jpg);  
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
}

Я не могу получить фоновое изображение позадимои тексты.Я не хочу устанавливать фоновое изображение через тег прямого тела.Я застрял здесь.Пожалуйста помоги.Спасибо

Answer 1

@ Akansha, ваш код в порядке, за исключением того, что вы не смогли указать свой контейнер.Другими словами, у вас есть фон, вы просто его не видите.

По умолчанию, блочные элементы имеют ширину по умолчанию 100%, но высоты по умолчанию нет.Фоновые изображения также не влияют на высоту элемента.Таким образом, высота должна быть добавлена.

.content-wrapper{ 
    height: 100vh;
    background-image: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg");  
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
}

<div class="content-wrapper">
  <div class="center">
    <h1>heading</h1>
  </div>
  <div class="lr">
    <p> paragraph </p>
  </div>
</div>

Вы можете увидеть этот код в действии здесь: https://jsfiddle.net/j_pinder/nkLf03ao/2/

Answer 2

Вы также должны указать высоту изображения.height:100vh vh: hundredths of the viewport height.Вы также можете определить высоту в px или percentage.

.content-wrapper{ 
    background-image: url("https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg ");  
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
  height: 100vh;
}

<div class="content-wrapper">
  <div class="center">
    <h1>heading</h1>
  </div>
  <div class="lr">
    <p> paragraph </p>
  </div>
</div>

Answer 3

Это то, что вы ожидаете?Если да, ваш код кажется нормальным.Убедитесь, что на ваше изображение ссылаются хорошо.

.content-wrapper{ 
    background-image: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg");  
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
}

<div class="content-wrapper">
  <div class="center">
    <h1>heading</h1>
  </div>
  <div class="lr">
    <p> paragraph </p>
  </div>
</div>