CSS Image de fond non chargée
J'ai suivi tous les tutoriels, qui disent tous la chose dire. Je spécifie mon arrière-plan à l'intérieur du corps dans ma feuille de style css, mais la page affiche simplement un arrière-plan blanc vierge. L'image se trouve dans le même répertoire que les pages .html et .css. Le tutoriel dit que
<body background="image.jpeg">
est obsolète, donc j'utilise, en css,
body {background: url('image.jpeg');}
pas de succès . Voici la feuille de style css complète:
body
{
background-image: url('nickcage.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif;
color: red;
}
voici une autre image résultat url..travail 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;
}
Tout d’abord, saluez ces citations:
background-image: url(nickcage.jpg); // No quotes around the file name
Ensuite, si votre HTML, vos CSS et vos images se trouvent tous dans le même répertoire, supprimez les guillemets et corrigez-les. vous accédez correctement à 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 aide.
J'ai eu le même problème. Le problème a fini par être le chemin du fichier image. Assurez-vous que le chemin de l'image est relatif à l'emplacement du fichier CSS au lieu du HTML.
J'ai rencontré le même problème ... Si vous avez vos images dans des dossiers, essayez ceci
background-image: url(/resources/img/hero.jpg);
N'oubliez pas de mettre la barre oblique inverse devant le premier dossier.
essaye ça
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 barre oblique 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 fonctionne pour moi, je la mets dans le css de mon corps (où l’image se trouve dans le même dossier que celui dans lequel se trouvent mes fichiers css et .html):
background: url('test.jpg');
Une autre chose dont vous devez vous soucier est de faire attention à l’extension d’image, assurez-vous que votre image a une extension .jpeg ou .jpg. Merci
Le chemin d'accès à l'image doit être relatif, cela signifie que si le fichier css se trouve 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 revenir à la racine de votre maison par ../ chemin puis /images/logo.jpg chemin vers le fichier image . Si vous incluez un fichier css dans le code HTML lui-même
body{
background-image: url(images/logo.jpg);
}J'avais changé la racine du document pour mon serveur Web Apache installé sur wamp-server. L’utilisation de l’URL relative (images/img.png) ne fonctionnait donc pas. J'ai dû utiliser l'URL absolue pour que cela fonctionne, c'est-à-dire
background-image: url (" http: //localhost/project_x/images/img.png ");
J'ai trouvé que le problème était que vous ne pouvez pas utiliser une URL courte pour l'image "img/image.jpg".
vous devriez utiliser l'URL complète " http://www.website.com/img/image.jpg ", mais je ne sais pas pourquoi !!
Si vous placez un dossier image et css dans un répertoire parent, supposez que vous possédez des actifs, le code suivant fonctionne parfaitement. La citation double ou sans citation double fonctionne bien.
body{
background: url("../image/bg.jpg");
}Dans d'autres cas, par exemple si vous appelez une classe et essayez de placer une image d'arrière-plan à un emplacement particulier, vous devez également mentionner hauteur et largeur.
le code suivant a fonctionné pour moi où j'avais placé l'image dans un dossier/assets/img/background_some_img.jpg
background-image: url('../img/background_some_img.jpg');
background-size: cover;
background-repeat: no-repeat;
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 du contexte, je suis en train de styler dans une application Rails dans le répertoire suivant:
apps/assets/stylesheets/main.scss
Je voulais rendre l'image d'arrière-plan dans la balise d'en-tête. Ce qui suit était ma mise en œuvre originale.
header {
text-align: center;
background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
url('../images/header.jpg') no-repeat;
background-blend-mode: multiply;
background-size: cover;
}
... par conséquent, l'erreur suivante apparaissait sur le serveur Rails et sur la console dans les outils de développement de 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 moment-là, j'étais très confus ... J'ai décidé de déplacer le dossier d'images du répertoire assets (ce qui est le répertoire par défaut) dans le répertoire stylesheets, et j'ai essayé les variantes 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 d'erreur de console et de serveur Rails. Mais l'image ne montrait toujours pas pour une raison quelconque. Après avoir abandonné temporairement, j'ai découvert que la solution à cela était d'ajouter une propriété height afin 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 de savoir pourquoi les 3 tentatives d’URL initiales avec "../images/header.jpg" n’ont pas fonctionné sur localhost, ni quand je devrais ou ne pas ajouter de point au début de l’URL.
Cela pourrait avoir quelque chose à voir avec la configuration de la balise de lien par défaut dans application.html.erb, ou peut-être que c'est un problème .scss vs .css. Ou alors, c’est peut-être ainsi que fonctionne la propriété background avec url () (l’image doit se trouver dans le même répertoire que le fichier css)? Quoi qu'il en soit, voici comment j'ai résolu le problème d'image de fond CSS qui ne se chargeait pas sur localhost.