web-dev-qa-db-fra.com

CSS Background-Image refuse de s'afficher dans ASP.Net MVC

Je ne parviens pas à afficher une image d'arrière-plan dans mon application ASP.NET MVC 2. Actuellement, dans ~/Views/Shared/Site.master, je mets mon lien vers la feuille de style sur:

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

L'image que je compte afficher se trouve dans ~/Content/Images/Designs.png

Voici ce que j'ai essayé

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;
}

Autres Essais Inclus: 

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

aucun des essais ci-dessus n'a fonctionné. Que puis-je faire?

cssasp.net-mvc-2
14
Eon

L'URL à l'intérieur d'un fichier CSS est relative à l'emplacement du fichier CSS.

Donc, si nous supposons que vous avez ~/content/foo.css et que vous voulez inclure ~/images/foo.png, voici comment le référencer dans foo.css:

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

N'utilisez aucun ~ dans un fichier CSS. Cela n'a pas de sens.

Donc, dans votre cas, si le fichier CSS est ~/Content/Site.css et que vous souhaitez référencer ~/Content/Images/Designs.png, la syntaxe correcte est la suivante:

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

Si cela ne fonctionne pas pour vous, les causes peuvent être différentes:

  • L'image n'existe pas à cet endroit
  • Vous n'avez pas spécifié la largeur et la hauteur à l'élément conteneur, vous ne voyez donc pas l'image

Ce que je vous recommanderais, c’est d’utiliser FireBug et d’inspecter l’élément DOM correspondant pour voir exactement quels styles et quelles images lui sont appliqués.

35
Darin Dimitrov

C'est ce que je devais faire:

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

Si vous utilisez des ensembles et que la structure de répertoires ressemble à ceci:

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

vous pouvez ensuite créer un ensemble distinct pour le contenu de sous-répertoires en définissant l'ensemble dans ce sous-répertoire:

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


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

Dans mon cas, j'ai dû revenir à la racine et inclure un chemin d'accès au répertoire de contenu.

Donc, même si ma structure de répertoire ressemblait à:

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

Je ne pouvais pas faire 

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

Je devais faire:

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

Cela a fonctionné localement en mode débogage (pas de minification) et déployé correctement sur AWS (avec minification). 

De plus, n'oubliez pas si vous utilisez la minification d'ensembles et que vous utilisez @import dans votre code CSS pour inclure l'actif dans l'ensemble. Par exemple:

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

Assurez-vous d'inclure some.css dans votre forfait:

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

Inutile de faire cela si vous utilisez des bundles LESS ou SASS car le gestionnaire sait comment trouver les fichiers et les inclure (c'est le but!) Toutefois, si vous le faites en tant qu'importation CSS directe, le regroupeur ne saura pas l'inclure lorsqu'il sera réduit.

J'espère que cela aide quelqu'un! 

1
tofortier

Restez simple, stupide.

A tout moment, essayez de vous en tenir aux chemins relatifs avec l'attribut css url. 

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

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

Le problème avec les fausses URLs est que css ne peut pas localiser cette image car elle ne comprend pas la convention utilisée sur cette URL, donc l'image n'est pas affichée. Donc, pour rester simple, utilisez l'approche du chemin relatif, vous n'aurez jamais de problèmes.

0
Mosia Thabo

utiliser ci-dessous le code

.Contexte { background-image: url ("../ Images/backimage.jpg"); background-position: hériter; }

0
Sam Tam

Cela fonctionne pour moi

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

Comme j'ai des images foler directement dans mon projet alors J'ai utilisé dans l'URL 

          /images/image.jpg

comme

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

Il pourrait s'agir d'un problème de mise en cache dans le navigateur. c'est-à-dire que le navigateur peut mettre en cache une version plus ancienne si le fichier css. Effacez le cache et réessayez.

0
Mr Lister