background: url(); не работает

Подробности: Использование редактора файлов Atom с Mac OS X, Создание нового сайта на локальном хосте и после сохранения я проверяю изменения в браузере Chrome. Прямо сейчас я столкнулся с проблемой, которая заставляет изображение не показываться на веб-сайте, в то время как я пытался установить фоновое изображение тега раздела в CSS.

Проблема: я пытаюсь использовать плагин параллакса stellar.js, и для этого мне нужно установить свойство background тега section для изображения по своему выбору. Проблема в том, что когда я использую "background: url(parallax1.png);" изображение не отображается на веб-сайте и отображается только белое пустое пространство.

HTML-файл:

<!-- Attempting Parallax Here -->
<section class="parallax1 pic1">
</section>
<!-- Ending Attempt Here -->

Файл CSS:

.pic1
{
  background : url(parallax1.png);
}
.parallaxcontent
{
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  background-size : cover;
  width: 100%;
  height: auto;
}

Очки, которые вы должны знать:

  • изображение parallax1.png находится в том же каталоге, и я проверил правописание, и это правильно.
  • Я также попытался использовать background-image: вместо background: .
  • Если я использую , изображение отлично видно
  • Я пытался заключить в parallax.png в '', а также "".

Любая помощь будет оценена, спасибо.

Источник

3 ответа

Как правило, вы должны иметь некоторый контент в теге section или вы можете установить его в классе.pic1

min-height:200px;
Источник

Взглянуть

HTML

<section class="parallax1 pic1">
</section>

CSS

.pic1
{
  background: blue url("https://static.xx.fbcdn.net/rsrc.php/v2/y6/r/QDLPxJ5bMSg.png");
  width: 100px;
  height: 32px;
  border:1px solid #000;
}
.parallaxcontent
{
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  background-size : cover;
  width: 100%;
  height: auto;
}

рабочая скрипка

Источник

Пытаться background : url("parallax1.png");

Подробнее читайте здесь CSS background Property

Источник
Другие вопросы по тегам