Фоновые изображения не появляются - PullRequest
Новая
       0

Фоновые изображения не появляются

0 голосов
/ 17 августа 2011

У меня есть здесь мои коды для HTML и CSS. Кажется, я не понимаю, почему мои изображения не загружаются или не отображаются. Я пробовал их загружать как на Firefox, так и на Chrome.

Моя проблема не в jsfiddle.

А вот моя структура папок:

  • localhost / website / img
  • локальных / сайта / KSS
  • локальный / сайт

http://jsfiddle.net/p8eS3/1/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="description" />
        <meta name="author" content="author" />
        <link href="css/index.css" rel="stylesheet" type="text/css" />

        <title>Title</title>

    </head>

    <body>
        <div id="container">
            <div id="sidebar">
                <div id="logo"></div>
            </div>
        </div>
    </body>

</html>

@charset "utf-8";
/* Body */

#body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    background: #ccc;
}

/* Container */

#container {
    width: 100%;
    background: #000;
}

/* Sidebar */

#sidebar {
    background: url(../img/sidebar.png) repeat-y;
    width: 40%;
    float: left;
    position: fixed;
}

/* Logo */

#logo {
    background-image: url(../img/logo.png);
}

Ответы [ 7 ]

2 голосов
/ 17 августа 2011

У вас есть два изображения, они добавляются в качестве фоновых изображений для элементов div, но эти элементы div не имеют макета, поскольку на боковой панели не хватает высоты, а также высоты и ширины логотипа. Что означает, что они не появляются вообще. Дайте им высоту / ширину, чтобы исправить это.

Если нет, то пути к изображениям неверны.

2 голосов
/ 17 августа 2011

Изображения не загружаются, так как jsfiddle не распознает ../img/sidebar.png, так как это будет выглядеть локально на их сервере.

Я предполагаю, что это не ваша первоначальная проблема, и что у вас возникают проблемы с получением правильного пути к вашему приложению.

Я бы порекомендовал «укоренить» URL вашего изображения, чтобы оно работало из корневой папки в такое расположение, как: 

background: url(/img/sidebar.png) repeat-y;
0 голосов
/ 17 августа 2011

Попробуйте, 

#sidebar {
    background: url(../img/sidebar.png) repeat-y;
    width: 40px;   /* your background width */
    height:60px;    /* your background height */
    float: left;
    position: fixed;
}

/* Logo */

#logo {
    background: url(../img/logo.png) 0 0 no-repeat;
    width: 40px;   /* your logo width */
    height:60px;    /* your logo height */
}
0 голосов
/ 17 августа 2011

Вы должны указать width и height для вашего #logo элемента, чтобы BG могла появиться.

0 голосов
/ 17 августа 2011

Это потому, что ваши div'ы на самом деле не занимают места, поэтому вы не можете видеть фон. См. вашу модифицированную скрипку для примера того, как это исправить.

В качестве альтернативы вы можете рассмотреть возможность использования HTML-тегов img .

0 голосов
/ 17 августа 2011

Ваш путь к изображениям, скорее всего, отключен.Это будет трудно отлаживать с помощью js fiddle.Вы можете опубликовать свою структуру каталогов?

0 голосов
/ 17 августа 2011

Может быть ваша структура папок. Являются ли изображения в папке того же уровня, что и ваш HTML-файл, или уровень выше. Если они одного уровня, попробуйте заменить ../images на ./images

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

Нет похожих вопросов

...