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

Question

У меня проблемы с отображением фонового изображения в приложении 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); 

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

Answer 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, чтобы точно определить, какие стили и изображения применяются к нему.

Answer 2

Вот что мне нужно было сделать:

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

Answer 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); 

Answer 4

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

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

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

Я не мог 't do

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, как знает обработчиккак найти файлы и включить их (в этом суть!);однако, если вы делаете это как прямой импорт CSS, упаковщик не будет знать, чтобы включить его при минимизации.

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

Answer 5

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

• Использование обычного HTML / CSS

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

• Структура моей папки для бритвы

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

Answer 6

Держите это просто глупо.

Всегда старайтесь придерживаться относительных путей с атрибутом 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-адреса, поэтому изображение не отображается. Так что для простоты используйте подход относительного пути, и у вас никогда не будет проблем.

Answer 7

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

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

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

          /images/image.jpg 

как

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

Answer 8

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

.background {background-image: url ("../ Images / backimage.jpg");background-position: наследовать;}

Answer 9

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