Как добавить фоновые изображения для jumbotron в bootstrap?

Question

Я начал с бутстрапа всего 2 дня назад.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я не могу разместить фоновое изображение на всей моей странице или даже на моем jumbotron. Я попробовал прямо указать путь (как относительный, так и абсолютный) к тегу div, но это не сработало. Я также пробовал через css, но все же я не вижу фонового изображения на моем выходе. Пожалуйста помоги!

В основном я хочу иметь фоновое изображение для jumbotron.

Это код, который я написал:

Html:

<div class="row"> 
    <div class="jumbotron"> 
     <div class="container"> 
      <center> 
       <h1>Avudo computers</h1> 
       <h5>Redesigning HOPES.</h5> 
      </center> 
     </div> 
    </div> 
</div> 

Css:

background-image: url(../img/jumbotronbackground.jpg); 
background-position: 0% 25%; 
background-size: cover; 
background-repeat: no-repeat; 
color: white; 
text-shadow: black 0.3em 0.3em 0.3em; 

Answer 1

Попробуйте, как это, чтобы установить изображение для всей страницы

body { 
    background-image: url(../img/jumbotronbackground.jpg); 

} 

Answer 2

If похоже, что вы просто не заявили класс/ID в вашем CSS.

Вы должны прикрепить .jumbotron к вашему CSS rules.

См. Пример.

body, 
 
html { 
 
    background: url(http://i.telegraph.co.uk/multimedia/archive/02423/london_2423609k.jpg) center center no-repeat; 
 
    background-size: cover; 
 
    height: 100%; 
 
} 
 
div.jumbotron { 
 
    background-image: url(http://placehold.it/1350x550/f00/f00); 
 
    background-position: 0% 25%; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    color: white; 
 
    text-shadow: black 0.3em 0.3em 0.3em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="jumbotron"> 
 
    <div class="container"> 
 
    <center> 
 
     <h1>Avudo computers</h1> 
 
     <h5>Redesigning HOPES.</h5> 
 
    </center> 
 
    </div> 
 
</div>