web-dev-qa-db-fra.com

Image de fond CSS non affichée

J'ai un fichier HTML avec un sous-répertoire appelé img avec une image appelée debut_dark.png. Dans mon fichier CSS, j'ai:

body { 
    background: url(/img/debut_dark.png) repeat 0 0;
}

Le fichier HTML a la balise body et inclut le fichier CSS de manière appropriée. Je sais pour sûr que le fichier CSS est correctement inclus car tout le reste est correctement formaté.

L'image d'arrière-plan ne s'affiche pas, je ne vois qu'un fond blanc. Des idées comment résoudre ce problème, ou même comment le déboguer?

htmlcsspathbackground-image
20
darksky

Selon votre chemin de fichier CSS, je suppose que c'est dans le même répertoire que votre page HTML, vous devez modifier la variable url comme suit:

body { background: url(img/debut_dark.png) repeat 0 0; }
14
SaidbakR

Vous devriez utiliser comme ceci:


 corps {
 background: url ("img/debut_dark.png") répéter 0 0; 
 } 

 corps {
 background: url ("../ img/debut_dark.png") répéter 0 0; 
 } 

 corps {
 background-image: url ("../ img/debut_dark.png") répéter 0 0; 
 }

ou essayez d’inspecter les règles CSS en utilisant l’outil Firefox Firebug.

11
Surinder ツ

Assurez-vous que votre corps a une hauteur, par exemple:

body { 
    background: url(/img/debut_dark.png) repeat;
    min-height: 100%;
}
3
David Hellsing

J'ai le même problème. Mais cela fonctionne correctement pour moi

background: url(../img/debut_dark.png) repeat
3
Peter Focus

Je sais que cela ne traite pas le cas exact de l'OP, mais pour les autres utilisateurs de Google, n'oubliez pas d'essayer display: block; en fonction du type d'élément. J'avais l'image dans un <i>, mais elle n'apparaissait pas ...

3
daniel.caspers

Il est toujours bon d’avoir ces propriétés supplémentaires en plus de la 

image d'arrière-plan: url ('chemin') no-repeat 0 0;

  1. définir la dimension à l'élément

    largeur: x; hauteur: y;

  2. taille du fond: 100%

    • Cette propriété permet d’adapter l’image à la dimension ci-dessus que vous définissez pour un élément.
1
Jay

Vous devez utiliser un chemin relatif dans l'URL. Je pense que vous avez créé deux dossiers dans le répertoire racine où réside votre index.html. L'un est le dossier 'CSS' et l'autre est le dossier 'img'. 

Maintenant, si vous devez accéder au dossier 'img' dans les fichiers css. Vous devez donc revenir une fois dans le répertoire racine en utilisant la syntaxe "../". Déplacez ensuite le dossier 'img' en utilisant la syntaxe "../img". Puis écrivez le nom de l'image "../img/debut_dark.png". 

1
ANIL PATEL
body { 
        background: url("../img/debut_dark.png") no-repeat center center fixed;
    }

Travaillé pour moi.

1
Daiana

Eh bien, j'ai compris que cet attribut affichait une image lorsque l'emplacement complet y était indiqué. J'ai simplement téléchargé cette image sur mon serveur et lié l'emplacement de cette image dans l'image d'arrière-plan: url ("xxxxx.xxx"); attribut et cela a finalement fonctionné, mais si vous n’avez pas de serveur, essayez d’entrer l’emplacement complet de l’image dans l’attribut en allant à la propriété de cette image. Bien que j'utilisais cet attribut dans la balise d'un fichier HTML, cela fonctionnera sûrement aussi sur le fichier CSS. Si cette méthode ne fonctionne pas, essayez de télécharger votre image sur Internet, comme behance, facebook, instagram, etc., inspectez-la et copiez-la sur votre attribut. J'espère que cela fonctionnera 

0
Praks

J'utilise CSS intégré sur un ordinateur local. J'ai mis le fichier atom.jpg dans le même dossier que mon fichier html, alors ce code a fonctionné:

background-image:url(atom.jpg);
0
user3216740

J'avais le même problème, après avoir enlevé la partie repeat 0 0, cela a résolu mon problème.

0
Prakash Poudel