background-image css не работает

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

Вот мой код, где я ошибся? Путь

.main-banner { 
    background-image: url("../img/collection-of-classic-cars.jpg") no-repeat; 
} 

<section> 
    <div class="jumbotron"> 
     <div class="container"> 
      <div class="main-banner"></div> 
      <h1>Welcome!</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
      <a class="btn btn-primary btn-lg" href="#name" role="button">Contact us</a> 
     </div> 
    </div> 
</section>

Файл:

/img/collection-of-classic-cars.jpg

источник

2016-05-28 brando

Включает ли css в ту же папку, что и HTML? И есть HTML В корневой папке? – Randy

Загружает ли изображение, помещая его в HTML как тег 'img'? – Randy

У вас нет контента в 'div.main-banner'. Попытайтесь поместить там какой-то текст, посмотрите, что это делает. 0 ширина и высота никогда не будут отображаться. – Randy

Вы не должны использовать не повторять в background-image собственности, это может быть использовано в фоновом режиме стенографии, так что это так:

.main-banner { 
    background-image: url("../img/collection-of-classic-cars.jpg"); 
    background-repeat: no-repeat; 
}

http://tympanus.net/codrops/css_reference/background-image/ http://tympanus.net/codrops/css_reference/background-repeat/

источник

2016-05-28 23:17:26 vicodin

Также можно использовать фон с короткой рукой ... – alirobe

Обратите внимание, что URL-адрес изображения должен быть relative to the stylesheet не HTML, который вы подаете. Поэтому, скорее всего, ваш путь изображения неверен. Другая очень распространенная ошибка - несоответствие имени файла. FOO.jpg - это не то же самое, что и foo.jpg в системах типа unix.

источник

2016-05-28 23:17:31 TeaCode

он не смог получить свойство, а не путь – vicodin

Это то, что сработало для меня. Я попытался использовать «/» и «./». Когда я прочитал вам ответ, я попробовал «../», и это сработало. Благодаря! –

<div class="main-banner"></div> не имеют размера ... http://jsfiddle.net/fnw39gco/1/

нет повторения необходимо определить как свои собственные CSS тег:

фон-повторить: не повторять

http://www.w3schools.com/cssref/pr_background-repeat.asp

источник

2016-05-28 23:20:15 Proxytype

Спасибо всем за быстрые ответы! Установка ширины и высоты сделала трюк. – brando

Как викодин заявил , ваш код CSS неверен. Свойство background-image будет принимать только URL. Лучшим способом было бы использовать стенографию background:

background: url("../img/collection-of-classic-cars.jpg") no-repeat; 

/* Adding even more options */ 
background: #FFF url('img.jpg') center fixed no-repeat; 

/* Which would be the same as */ 
background-color: #FFF; 
background-image: url('img.jpg'); 
background-position: center; 
background-attachment: fixed;

источник

2016-05-28 23:43:47 JasonK

background-image css не работает

ответ

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