CSS image d'arrière-plan qui ne se chargent pas

tout D'abord, dites au revoir à ces citations:

background-image: url(nickcage.jpg); // No quotes around the file name

ensuite, si votre html, css et image sont tous dans le même répertoire, alors supprimer les guillemets devrait le corriger. Si, par contre, votre CSS ou votre image sont dans des sous-répertoires de l'endroit où votre html vit, vous voudrez vous assurer que vous avez correctement le chemin vers l'image:

background-image: url(../images/nickcage.jpg); // css and image live in subdorectories

background-image: url(images/nickcage.jpg); // css lives with html but images is a subdirectory

J'espère que ça aidera.

j'ai eu le même problème. Le problème a fini par être le chemin vers le fichier image. Assurez-vous que le chemin d'image est relatif à l'emplacement du fichier CSS au lieu du HTML.

essayez cette

background-image: url("/yourimagefolder/yourimage.jpg"); 

j'ai eu le même problème quand j'ai utilisé background-image: url("yourimagefolder/yourimage.jpg");

remarquez la coupure qui a fait la différence. Le niveau du dossier était la raison pour laquelle je ne pouvais pas charger l'image. Je suppose que vous avez également rencontré le même problème

pour moi la ligne suivante travaille pour moi , je l'ai mis dans le css de mon corps ( où l'image est dans le même dossier dans lequel mon CSS et .fichiers html):

background: url('test.jpg');

autre chose dont vous devez vous soucier est , faites attention à l'extension de l'image , assurez-vous que votre image A.jpeg ou .extension jpg. Merci

j'ai rencontré le même problème. Si vous avez vos images dans des dossiers puis essayer ce

background-image: url(/resources/img/hero.jpg);

n'oubliez pas de placer l'antislash devant le premier dossier.

j'ai trouvé le problème était vous ne pouvez pas utiliser L'URL courte pour l'image" img/image.jpg "

vous devez utiliser L'URL complète " http://www.website.com/img/image.jpg ", pourtant je ne sais pas pourquoi !!

j'avais changé la racine du document pour mon serveur web apache installé sur Wamp-server. donc en utilisant l'url relative i.e. (images / img.png) n'a pas fonctionné. J'ai dû utiliser l'url absolue pour qu'elle fonctionne, c'est-à-dire

arrière-plan-image: url (" http://localhost/project_x/images/img.png ");

le code suivant a travaillé pour moi où j'avais placé l'image dans mondossier/assets/img/background_some_img.jpg

background-image: url('../img/background_some_img.jpg');
background-size: cover;
background-repeat: no-repeat;

si vous placez l'image et le dossier css dans un répertoire parent supposez des actifs alors le code suivant fonctionne parfaitement. Soit double citation ou sans double citation les deux fonctionnent très bien.

body{
   background: url("../image/bg.jpg");
}

Dans d'autres cas, comme si vous appelez d'une classe et d'essayer de mettre une image de fond dans un endroit particulier, alors vous devez mentionner la hauteur et la largeur.

le chemin d'accès à l'image doit être relatif, c'est-à-dire que si le fichier css est dans le dossier css, vous devez démarrer le chemin avec ../ tel que

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

c'est parce que vous devez retourner à la maison dir par ../ chemin d'accès, puis /images/logo.jpg chemin vers le fichier image. Si vous incluez le fichier css en html lui-même

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

j'aimerais partager mon processus de débogage parce que j'ai été bloqué sur cette question pendant au moins une heure. L'Image n'a pas pu être trouvée lors de l'exécution de l'hôte local. Pour ajouter un peu de contexte, je suis en train de coiffer une application de rails dans le répertoire suivant:

apps/assets/stylesheets/main.scss

je voulais rendre l'image de fond dans la balise d'en-tête. Ce qui suit a été ma mise en œuvre initiale.

header {
    text-align: center;
    background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
              url('../images/header.jpg') no-repeat;
              background-blend-mode: multiply;
              background-size: cover;
}

... en conséquence j'ai eu l'erreur suivante dans le serveur de rails et le console dans les outils de développement Chrome, respectivement:

ActionController::RoutingError (No route matches [GET] "/images/header.jpg")
GET http://localhost:3000/images/header.jpg 404 (Not Found)

j'ai essayé différentes variantes de l'url:

url('../images/header.jpg') # DID NOT WORK
url('/../images/header.jpg') # DID NOT WORK
url('./../images/header.jpg') # DID NOT WORK

et cela n'a toujours pas fonctionné. À ce point, j'étais très confus...J'ai décidé de déplacer le dossier image du répertoire assets (qui est la valeur par défaut) à l'intérieur du répertoire stylesheets, et j'ai essayé les variations suivantes de l'url:

url('/images/header.jpg') # DID NOT WORK
url('./images/header.jpg') # WORKED
url('images/header.jpg') # WORKED

Je n'ai plus l'erreur console et rails server. Mais l'image n'était toujours pas visible pour une raison quelconque. Après avoir temporairement abandonné, j'ai découvert que la solution était d'ajouter une propriété de hauteur pour que l'image soit affichée...

header {
    text-align: center;
    height: 390px;
    background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
              url('images/header.jpg') no-repeat;
              background-blend-mode: multiply;
              background-size: cover;
}

malheureusement, je ne suis toujours pas sûr pourquoi les 3 url initiales tente avec "../ images / header.jpg" n'a pas fonctionné sur localhost, ou quand je devrais ou ne devrais pas ajouter une période Au début de l'url.

il pourrait avoir quelque chose à voir avec la façon dont la balise de lien configuration dans l'application.HTML.erb, ou peut-être c'est un .scss vs .CSS truc. Ou, peut-être que c'est juste la façon dont la propriété background avec url() fonctionne (l'image doit être dans le même répertoire que le fichier css)? Quoi qu'il en soit, c'est comme ça que j'ai résolu le problème avec l'image de fond CSS qui ne se charge pas sur localhost.

je peux apporter un peu d'aide ici... il semble que, lorsque vous utilisez background-image: url("/images/image.jpg"); ou background-image: url("images/image.jpg"); background-image: url("../ images / image.jpg"); différents navigateurs semblent voir cela différemment. le premier que le navigateur semble voir comme domain.com/images/image.jpg.... la seconde que le navigateur voit à domain.com/css/images/image.jpg.... et la finale que le navigateur voit comme domain.com/PathToImageFile/image.jpg ... espère que cela aide

j'ai eu le même problème et après avoir lu ceci a trouvé le problème, c'était la barre oblique. Chemin D'Accès Windows: images\green_cup.png

CSS qui a fonctionné: images / green_cup.png

images\green_cup.png ne fonctionne pas.

Phil