Вставьте фоновое изображение в CSS (Twitter Bootstrap)

Ответ 1

Поместите фоновый url в кавычки.

Это должно быть background: url('background.png');

См. здесь для рабочей демонстрации.

У вас также есть проблема с background-repeat line отсутствием точки с запятой между двумя операторами. Если ваш фон действительно крошечный, вы не увидите его из-за этой проблемы.

Чтобы обновить решение, среди других проблем, фоновый файл был отмечен .../background.jpg, когда он должен был быть ../background.jpg (2 точки, а не 3).

Ответ 2

не проблема, следующая строка неверна, поскольку инструкция для background-repeat не закрывается перед следующим оператором для display...

background-repeat:no-repeatdisplay: compact;

Не должно быть

background-repeat:no-repeat;
display: compact;

Добавление или удаление кавычек (по моему опыту) не имеет значения, правильно ли URL. Правильно ли путь к изображению? Если вы относите относительный путь к ресурсу в CSS, это относится к файлу CSS, а не к файлу, включая CSS.

Ответ 3

Является ли ваше изображение в той же папке/каталоге, что и ваш файл css? Если это так, ваш URL-адрес изображения правильный. В противном случае это не так.

Если ваша структура папки похожа на...

веб-страница
-index.html
-css
- - style.css
- изображения
- - background.png

то для ссылки на изображение в вашем файле css вы должны использовать следующий путь:

../изображений/background.png

Итак, это будет background: url ('../images/background.png');

Логика проста: перейдите в одну папку, набрав "../" (столько раз, сколько вам нужно). Спуститесь по одной папке, указав папку, в которую вы хотите перейти.

Ответ 4

Добавление фонового изображения на элемент html, body или обертки для достижения фонового изображения вызовет проблемы с заполнением. Проверьте этот билет https://github.com/twitter/bootstrap/issues/3169 на github. ShaunR, а также один из ответов авторов на это. Данное решение в созданном билете не решает проблему, но, по крайней мере, это происходит, если вы не используете отзывчивые функции.

Предполагая, что вы используете контейнер без чувствительных функций и имеете ширину 960 пикселей, и хотите получить отступы 10px, вы устанавливаете:

.container {
   min-width: 940px;
   padding: 10px;
}

Ответ 5

Если вы добавите следующее, вы можете установить цвет фона или изображение (ваш css)

 html { 
     background-image: url('http://yoursite/i/tile.jpg');
     background-repeat: repeat; 
 }

 .body {
     background-color: transparent; 
 }

Это связано с тем, что BS применяет правило css для цвета фона, а также для класса .container.

Ответ 6

И если вы не можете повторить фоновое изображение (по эстетическим соображениям) то этот удобный плагин JQuery растянет фоновое изображение на установите окно.

Бэкстретч http://srobbin.com/jquery-plugins/backstretch/

Прекрасно работает...

~ Ура!

Ответ 7

body {
    background-image: url(your image link);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
    background-color: #464646;
}

Ответ 8

Для большей модульности и в случае, если у вас много фоновых изображений, которые вы хотите включить, где бы вы ни захотели, вы можете для каждого изображения создать класс:

.background-image1  
{
background: url(image1.jpg);
 }
.background-image2  
{
background: url(image2.jpg);
 }

а затем вставьте изображение, где хотите, добавив div

<div class='background-image1'>
    <div class="page-header text-center", style='margin: 20px 0 0px;'>
         <h1>blabaaboabaon</h1>
    </div>
</div>

Ответ 9

Проблема также может заключаться в упорядочении импорта ваших таблиц стилей. Мне пришлось перенести импортированный импорт таблицы стилей ниже импорта начальной загрузки.