Фоновое изображение HTML и CSS не отображается - PullRequest
8 голосов
/ 12 января 2012

Я уже дважды проверил свой URL и имена файлов, но я не могу получить изображение для отображения.Почему это так?Вот мой код (обратите внимание, что <p> находится внутри тегов тела, я не добавил полный код, я только добавил голову и конкретную проблему).

<html>
  <head>
     <title>Head First Lounge.</title>
      <link type="text/css" 
            rel="stylesheet" 
            href="stylesheet/style.css" 
            media="screen"/>
  </head>


<p class = "guarantee">
     Our guarantee: at the lounge, we're committed to providing you, 
     our guest, with an exceptional experience every time you visit.
     Whether you're just stopping by to check in on email over an 
     elixir, or are here for an out-of-the-ordinary dinner, you'll 
     find our knowledgeable service staff pay attention to every detail. 
     If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>        

И вот правило CSSдля этой части

.guarantee{         
        background-image: url(images/background.gif);
        font-family: "Geogia", "Times New Roman", Times, serif;
        border-color: black;
        border-width: 1px;
        border-style: solid;
        background-color: #a7cece;
            padding: 25px;
            margin: 30px;
            line-height: 1.9em;
            font-style: italic;
            color: #444;
}

Ответы [ 5 ]

33 голосов
/ 12 января 2012

Попробуйте это:

background-image: url(../images/background.gif);

Без ../ он ищет папку изображений внутри вашей папки стилей, которая не существует. Поэтому вам нужно вернуться в каталог, где находится папка с изображениями.

Редактировать : Вы также можете сократить ваши стили CSS следующим образом:

.guarantee{
    background: #a7cece url(../images/background.gif);
    border: 1px solid black;
}
2 голосов
/ 12 января 2012

В настоящее время браузер будет искать изображение в каталоге стилей.

Может стоит попробовать изменить

background-image: url(images/background.gif);

до

background-image: url(/images/background.gif);

, которая может быть причиной проблемы.

0 голосов
/ 13 февраля 2016

Я знаю, что этот ответ немного запоздал, но эта ссылка даст вам подробное объяснение путей к файлам css.-file-пути /

0 голосов
/ 11 августа 2015

У меня возникла та же проблема, но я решил добавить / в начало изображения url

(пример: background-image: url (/images/background.gif);)

Надеюсь, это поможет:)

0 голосов
/ 02 октября 2014

Возможно, вы использовали обратную косую черту (\) вместо прямой косой черты (/) в пути изображения.

Я сделал эту ошибку и боролся с моим браузером Chrome. Я скопировал путь к изображению из Проводника Windows (который использует обратную косую черту)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...