CSS Background-Image отказывается отображать в ASP.Net MVC

У меня возникли проблемы с отображением фонового изображения в моем приложении ASP.NET MVC 2. В настоящее время, в ~/Views/Shared/Site.master, я установил ссылку на таблицу стилей:

<link href="<%:@Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />

Изображение, которое я планирую отображать, находится в моем ~/Content/Images/Designs.png

Вот что я пробовал

body
{
    background-image: url(~/Content/Images/designs.png); 
    background-repeat: repeat;  
    font-size: .75em;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

Другие попытки:

background-image: url(./Content/Images/designs.png); 
background-image: url(Content/Images/designs.png); 
background-image: url(Images/designs.png);

ни одна из вышеперечисленных попыток не работала. Что я могу сделать?

Ответы

Ответ 1

URL-адрес внутри файла CSS относится к местоположению файла CSS.

Итак, если мы предположим, что у вас есть ~/content/foo.css, и вы хотите включить ~/images/foo.png здесь, как ссылаться на него внутри foo.css:

background-image: url(../images/foo.png);

Не используйте ~ внутри файла CSS. Это не имеет значения.

Итак, в вашем случае, если файл CSS ~/Content/Site.css и вы хотите ссылаться на ~/Content/Images/Designs.png, правильный синтаксис:

background-image: url(images/designs.png);

Если это не работает для вас, могут быть разные причины:

  • Изображение отсутствует в этом месте
  • Вы не указали ширину и высоту содержащего элемента, чтобы вы не видели изображение

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

Ответ 2

Это то, что я должен был сделать:

background-image: url('@Url.Content("~/images/foo.png")')

Ответ 3

Если вы используете пакеты и имеете структуру каталогов, например:

-Content
--lightbox
---css
----lightbox.css
---imgages
----close.png

затем вы можете создать отдельный пакет для содержимого в подкаталогах, определив пакет в этом подкаталоге:

bundles.Add(new StyleBundle("~/Content/lightbox/css/bundle")
                .Include("~/Content/lightbox/css/lightbox.css"));


background-image: url(../images/close.png);

Ответ 4

В моем случае мне пришлось вернуться в корневой каталог и включить путь к каталогу Content.

Итак, даже если моя структура каталогов выглядела так:

-Content
--css
---site.css
--img
---someImg.png

Я не мог сделать

background-image: url(../img/someImg.png)

Мне пришлось делать:

background-image: url(../../Content/img/someImg.png)

Это работало локально в режиме отладки (без минимизации) и корректно развернуто в AWS (с минификацией).

Кроме того, не забудьте, используете ли вы минирование Bundle и используете @import в своем CSS, чтобы по-прежнему включать актив в комплект. Например:

main.css
@import url(../../Content/css/some.css)

Обязательно включите some.css в свой комплект:

 bundles.Add(new StyleBundle("~/Content/global").Include(
                 "~/Content/css/some.css",
                 "~/Content/css/main.css"));

Не нужно делать это, если вы используете LESS или SASS bundlers, поскольку обработчик знает, как найти файлы и включить их (что точка!); однако, если вы делаете это как прямой импорт CSS, поставщик не будет знать, чтобы включить его, когда он уменьшает.

Надеюсь, это поможет кому-то!

Ответ 5

Это может быть проблема кэширования в браузере; то есть браузер может кэшировать более старую версию, если файл css. Очистите кеш и повторите попытку.

Ответ 6

используйте ниже код

.background       {           background-image: url ( "../Images/backimage.jpg" );           background-position: inherit;       }

Ответ 7

Это работает для меня

     <div style="background-image:url('/images/home.jpg')">

КАК у меня есть папка с изображениями прямо в моем проекте, так я использовал в URL

          /images/image.jpg

как

   <div style="background-image:url('/images/image.jpg')">

Ответ 8

Держать его просто глупо.

Всегда старайтесь придерживаться относительных путей с атрибутом css url.

/* Assuming your Site.css is in the folder where "Images" folder is located */
/* Your Css Image url */

background-image: url("Images/YourImageUrl");

Проблема с неправильными URL-адресами заключается в том, что css не может найти это изображение, так как не понимает соглашение, используемое для этого URL-адреса, поэтому изображение не отображается. Так что для простоты используйте подход относительного пути, и у вас никогда не будет проблем.

Ответ 9

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

  • Используя обычный HTML/CSS

    body {background-image: url ("images/sparks.jpg");}

  • Моя структура папок для бритвы

    body {background-image: url ("../../images/sparks.jpg");}