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

Je vais avoir des problèmes d'affichage d'une image de fond dans mon ASP.NET MVC 2 de la demande. Actuellement, Dans ~/Views/Shared/Site.maître, j'ai mis mon lien vers la feuille de style:

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

L'image j'ai l'intention d'affichage est dans mon ~/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 ci-dessus tente travaillé. Que puis-je faire?

Avez-vous essayé ../Content/Images/designs.png
oui, vérifiez haut bloc de code
Désolé, le glissement du doigt. Je voulais dire .. au lieu de ~.
Vous n'avez pas obscur "sensible à la casse des noms de fichiers" interrupteur quelque part, vous?
le nom du fichier est tout en bas de casse. assez positif

OriginalL'auteur Eon | 2012-03-22

asp.net-mvc-2 css

33

L'url à l'intérieur d'un fichier CSS est relatif à l'emplacement du fichier CSS.

Donc, si nous supposons que vous avez ~/content/foo.css et que vous souhaitez inclure ~/images/foo.png voici comment faire référence à l'intérieur de foo.css:
```
background-image: url(../images/foo.png); 
```
Ne pas utiliser n'importe quel ~ à l'intérieur d'un fichier CSS. Il n'a pas de sens.

Donc, dans votre cas le fichier CSS est ~/Content/Site.css et que vous souhaitez pour référence ~/Content/Images/Designs.png la syntaxe correcte est:
```
background-image: url(images/designs.png); 
```
Si cela ne fonctionne pas pour vous, il peut y avoir différentes causes:
- L'image n'existe pas à cet endroit
- Vous n'avez pas à spécifier la largeur et la hauteur de l'élément conteneur de sorte que vous ne voyez pas l'image
Ce que je vous recommande est d'utiliser FireBug et inspecter le corresopnding élément du DOM pour voir exactement ce que les styles et les images sont appliquées.

bon, le point est , le dossier d'images est dans le dossier de contenu (où le css est), c'est quand j'ai essayé background-image: url(./Contenu/Images/designs.png); background-image: url(Contenu/Images/designs.png); background-image: url(Images/designs.png);
pas tous à la fois de l'ofc
Droite, donc la syntaxe correcte est background-image: url(images/designs.png);.
oui, cela fonctionne. Si ça ne marche pas il y a d'autres raisons. Non pas parce que son adresse n'est pas correcte.
Attendez, vous dites que vous avez essayé toutes ces choses en même temps?

OriginalL'auteur Darin Dimitrov
24

C'est ce que j'avais à faire:
```
background-image: url('@Url.Content("~/images/foo.png")')
```
Cela fonctionnera seulement si le css est sur la ligne. Parce que par défaut on ne peut pas utiliser de Rasoir code .les fichiers css. Si quelqu'un connaît la solution ennemi fichiers css aussi, l'ajouter ici, s'il vous plaît.
Nice, cela a fonctionné pour moi alors que je cherchais une ligne (à la cshtml) solution donc, mon code ressemble à <option style="padding: 5px 0 5px 40px; background: #FFFFFF url('@Url.Content("~/Content/flags/flag-usa2x.png")') no-repeat left center;">USA</option>
Solution parfaite si vous êtes à l'aide de la CSS à l'intérieur de Rasoir comme Zia dit.

OriginalL'auteur eilenberger

Si vous utilisez des faisceaux et a la structure de répertoire :

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

ensuite, vous pouvez faire un autre bundle pour le contenu des sous-répertoires en définissant le faisceau dans le sous-répertoire:

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


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

OriginalL'auteur LIDEN

1

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)
```
Que j'avais à faire:
```
background-image: url(../../Content/img/someImg.png)
```
Cette travaillé localement en mode debug (pas de minification) et déployé à AWS (avec minification) correctement.

Aussi, n'oubliez pas si vous êtes en utilisant un Faisceau de minification et que vous utilisez @import dans votre CSS pour toujours inclure l'actif dans le bundle. Par exemple:
```
main.css
@import url(../../Content/css/some.css)
```
Assurez-vous d'inclure some.css dans votre bundle:
```
 bundles.Add(new StyleBundle("~/Content/global").Include(
                 "~/Content/css/some.css",
                 "~/Content/css/main.css"));
```
Pas besoin de le faire si vous êtes en utilisant plus ou SASS bundlers que le gestionnaire sait comment trouver les fichiers et de les inclure (c'est le but!); toutefois, si vous le faites comme un droit des CSS à l'importation, le bundler ne saurez pas à l'inclure quand il minifies.

Espère que cela aide quelqu'un!

OriginalL'auteur tofortier
0

Il pourrait être un problème de mise en cache dans le navigateur, qui est, le navigateur peut mettre en cache une version antérieure, si le fichier css. Effacer la mémoire cache et essayez à nouveau.

ne pense pas que c'est, mon copain et moi sommes à la fois faire exactement la même application, nous pratiquons mvc. tout est encore en cas de défaut. maintenant, nous avons commencé avec le css, ajouté des Images dossier de dossier de contenu, et ajouté des dessins.png pour les images d'un dossier. nous avons changé le lien dans le site.maître à déployer-friendly notation <%: Url.Contenu(.....) %>, et changé la balise body: a pris couleur d'arrière-plan et a ajouté background-image: url(Images/designs.png)
Donc, c'est un tout nouveau site web? Est-il au moins un peu de contenu dans le corps?
Mauvais upvote, comme ce fut également 1 étape j'ai suivi, vous ne savez pas si elle est fixée. le plus proche de la réponse que j'ai eu à le fix + de l'apprentissage de quelque chose d'elle venait de darin
OK. Content que le problème est parti aujourd'hui!

OriginalL'auteur Mr Lister
0

utilisez code ci-dessous

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

Ce n'est pas ajouter quelque chose que les autres réponses ne l'ai pas déjà dit.

OriginalL'auteur Sam Tam

Cela Fonctionne Pour Moi

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

QUE j'ai des images foler direct dans mon projet
j'ai utilisé dans l'url

          /images/image.jpg

comme

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

OriginalL'auteur Ghulam Dastgeer

Vous devez vous connecter pour publier un commentaire.