Bootstrap Jumbotron Background Image Not Setting in style.css

Я не могу установить фоновое изображение jumbotron из моего внешнего файла стилей, хотя стиль работает inline.Bootstrap Jumbotron Background Image Not Setting in style.css

Ссылка на таблицу стилей может быть найдена между тегами заголовка и после ссылки на загрузку. Я работаю над этим пару дней без успеха, может ли это быть достигнуто?

Вот то, что я до сих пор:

CSS:

.jumbotron { 
    background: url('img/rocket.png'); 
    background-repeat:no-repeat; 
    background-color: #28b8f7; 
    color: #fff; 
    border-top: 1px solid #005D85; 
    border-bottom: 1px solid #005D85; 
}

Вот HTML:

<!-- Jumbotron & Call to Action --> 
<div class="jumbotron"> 
    <div class="container"> 
     <h1 class="text-right"></h1> 
     <div class="col-sm-6 col-sm-offset-6"> 
      <p class="pull-right"><br /> 
      <a class="btn btn-default btn-lg pull-right jumbut" href="#signUpModal" role="button" data-toggle="modal"></a></p> 

     </div> 
    </div> 
</div>

Хотя этот код, кажется, работает по сравнению что я уже пробовал:

<!-- Jumbotron & Call to Action --> 
<div class="jumbotron" style="background: url('img/rocket.png');background-repeat:no-repeat;background-color:#28b8f7;"> 
    <div class="container"> 
     <h1 class="text-right"></h1> 
     <div class="col-sm-6 col-sm-offset-6"> 
      <p class="pull-right"><br /> 
      <a class="btn btn-default btn-lg pull-right jumbut" href="#signUpModal" role="button" data-toggle="modal"></a></p> 

     </div> 
    </div> 
</div>

источник

2015-04-22 John Halbert

является файлом jumbotron в другой директории, отличной от файла style.css? Кажется, что URL-адрес правильный в одном случае, а не в другом, может быть основной причиной – xavdid

Где находится файл css по отношению к html-файлу и, более конкретно, к файлу изображения? В консоли браузера вы можете указать, есть ли 404 при попытке загрузить его или что-то в этом роде. Если вы перешли к загрузке по умолчанию, вам может потребоваться сделать «../img/rocket.png» –

Файл html находится в корневой папке, это index.html. Файл изображения находится в каталоге img под root, style.css в папке css под root. Стиль.css стилирует другие элементы, а не фон jumbotron. CSS в теге стиля в элементе jumbotron точно такой же, как в файле css. –

Судя по вашему последнему комментарию, это просто случай вашего URL ошибиться в месте вы находитесь. Насколько я понимаю, это ваша основная структура

-index.html 
-css (folder) 
--style.css 
-img (folder) 
--rocket.png

Вы определили в вашем style.css следующее свойство

background: url('img/rocket.png');

Поскольку ваш CSS находится в папке под названием «CSS» под корень, когда браузер смотрит на ваш URL будет решить его относительно его текущего местоположения, так что это в конечном итоге запросит http://yourgreatsite.com/css/img/rocket.png. Вот почему это сработало, когда вы положили его прямо в свой html, так как он разрешал URL-адрес относительно его текущего местоположения, который был корневым, поэтому он обратился к http://yourgreatsite.com/img/rocket.png.

Это очень просто решить, используйте точки, чтобы сообщить браузеру перейти «вверх» из вашей папки css, а затем в вашу папку с изображениями.

background: url('../img/rocket.png');

Это было бы действительно очевидно, если бы вы использовали ваши браузеры, созданные в инструментах разработчика. В большинстве современных браузеров есть инструменты разработчика или «Инспекторы». Откройте один из них, и вы обычно найдете панель под названием «Сеть» или «Сеть» или «Запросы». В нем будут перечислены все запросы, которые ваша веб-страница делает, внутренне или внешне, и выделяют все, что пошло не так. В этом случае он показал бы, что ваш фоновый образ возвращает файл «404 не найден» и показал вам URL-адрес, который он пытался использовать. Научитесь использовать инструменты разработчика, они сделают вашу жизнь намного проще!

источник

2015-04-23 19:47:43

Bootstrap Jumbotron Background Image Not Setting in style.css

ответ

Смежные вопросы