Image d'arrière-plan CSS non chargée

J'ai suivi tous les tutos, qui disent tous le dire chose. Je précise mon fond intérieur du corps, dans ma feuille de style css, mais la page affiche simplement un vide sur un fond blanc. L'Image est dans le même répertoire que le .html et le .pages css. Le tutoriel dit que

<body background="image.jpeg">

est obsolète, donc j'utilise, dans le css,

body {background: url('image.jpeg');}

sans succès.
Voici l'intégralité de la feuille de style css:

body 
{
background-image: url('nickcage.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;        
}

source d'informationauteur jaredad7

  1. 1

    voici une autre url de l'image résultat..fonctionne bien...je suis juste mis que le chemin de l'image..s'il vous plaît vérifier..

    Fiddel:http://jsfiddle.net/287Kw/

    body 
{
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;


}
  2. 17

    Tout d'abord, la vague bye-bye à ces citations:

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

    Ensuite, si votre code html, css et les images sont toutes dans le même répertoire, puis retirer les guillemets devrait résoudre le problème.
    Si, toutefois, votre css ou les images sont dans des sous-répertoires où html de votre vie, vous voudrez vous assurer que vous avez correctement chemin de 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

    Espère que cela aide.

  3. 6

    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 de l'image est relatif à l'emplacement du fichier CSS au lieu de le HTML.

  4. 3

    essayer cette 

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

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

    Avis de la barre oblique qui a fait la différence. Le niveau de la dossier était la raison pour laquelle je ne pouvais pas charger l'image. Je suppose que vous aussi rencontré le même problème

  5. 2

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

    background: url('test.jpg');

    Autre chose que vous devez prendre soin , c'est être prudent quant à l'image de l'extension , assurez-vous que votre image .jpeg ou .extension jpg. Grâce

  6. 1

    Je suis tombé sur le même problème.
    Si vous avez vos images dans des dossiers puis essayez ce

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

    N'oubliez pas de mettre la barre oblique inverse devant le premier dossier.

  7. 0

    J'ai trouvé le problème est que vous ne pouvez pas utiliser des URL de l'image "img/image.jpg"

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

  8. 0

    J'avais changé la racine du document pour mon wamp-server-installé un serveur web apache. donc, en utilisant l'url relative c'est à dire (images/img.png) ne fonctionne pas. J'ai dû utiliser l'url absolue dans l'ordre pour qu'il fonctionne, c'est à dire

    background-image:url("http://localhost/project_x/images/img.png");

  9. 0

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

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

    Je tiens à 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é lors de l'exécution de l'hôte local. Pour ajouter un peu de contexte, je suis de style à l'intérieur d'une application rails dans le répertoire suivant:

    apps/assets/stylesheets/main.scss

    J'ai voulu rendre compte de l'image de fond dans la balise d'en-tête. La suite a été mon premier mise en œuvre. 

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

    ...j'obtenais l'erreur suivante dans les rails du serveur et de la console de Chrome dev tools, 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 il n'a toujours pas de travail. À ce point, j'étais très confus...j'ai décidé de déplacer le dossier de l'image à partir du répertoire actif (par défaut) à l'intérieur de la stylesheets, et 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 eu la console et le serveur rails d'erreur. Mais l'image n'était pas toujours en montre pour une raison quelconque. Après temporairement abandonner, j'ai trouvé la solution à ce problème est d'ajouter une propriété height pour que l'image doit être 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 de savoir pourquoi les 3 premiers url tentatives avec "../images/header.jpg" ne marche pas sur localhost, ou si je doit ou ne doit pas être l'ajout d'une période au début de l'url.

    Il pourrait avoir quelque chose à voir avec la façon dont la valeur par défaut de la balise lien configuration dans l'application.html.erb, ou peut-être c'est un .scss vs .css chose. Ou, peut-être que c'est juste la façon dont la propriété background avec l'url() fonctionne (l'image doit être dans le même répertoire que le fichier css)? De toute façon, c'est comment j'ai résolu le problème avec le CSS de l'image de fond qui ne se chargent pas sur localhost.

  11. 0

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

  12. -2

    J'ai eu le même problème et après la lecture de ce trouvé le problème, c'est 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