CSS Image d'arrière-plan en n'Affichant Pas d'
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, la balise body et inclut le fichier CSS de façon appropriée. Je sais pour sûr que le fichier CSS est inclus correctement comme tout le reste est correctement formaté.
L'image de fond n'est pas affiché, je ne suis que de voir un fond blanc. Toutes les idées de comment résoudre ce problème, ou même comment le corriger?
- Vérifier si l'url de l'image est correcte. Ouvrir les outils de développement et de voir dans l'onglet réseau, votre debut_dark.png devrait y figurer. Vérifiez si il a été chargé, à tous les
- Êtes-vous sûr sur le chemin de l'image et le nom?Vérifiez avec firebug
- Si vous souhaitez déboguer quelque chose (HTML/JS/CSS) - vous pouvez toujours ouvrir une sorte d'outils de développement disponibles pour tous les navigateurs modernes (F12 est généralement suffisant, mais pour les FF, vous pourriez avoir besoin d'installer Firebug).
- Il semble que l'image n'est pas chargée. Le sous-répertoire img est dans le même répertoire que le fichier html. L'image est là. Je suis à l'aide de
img/debut_dark.png
comme le chemin, et il ne fonctionne pas. - avez-vous essayé d'utiliser certains outils de dev? Aussi - ce qui est le chemin d'accès à votre fichier HTML (qui est important à savoir)?
- Pouvez-vous ouvrir l'image directement dans le navigateur lors de la navigation pour img/debut_dark.png ?
- Essayez de supprimer le
repeat 0 0
partie et de mettre les imageswidth
etheight
. - Essayez cela, il peut aider stackoverflow.com/questions/20233529/pathing-from-in-subdomain/...
Vous devez vous connecter pour publier un commentaire.
Selon votre CSS chemin d'accès au fichier, je suppose que c'est dans le même répertoire que votre page HTML, vous devez modifier le
url
comme suit:Vous devriez l'utiliser comme ceci:
ou essayer de l'Inspection de Règles CSS à l'aide de Firefox Firebug outil.
Je sais que ce n'est pas l'adresse exacte cas de l'OP, mais pour d'autres, provenant de Google n'oubliez pas d'essayer
display: block;
basé sur le type de l'élément. J'ai eu l'image dans un<i>
, mais il n'arrivait pas...Assurez-vous que votre corps a une hauteur, f.ex:
.legaltech-procedure .legaltech-proc-details-left span.jp { display: block; background-image: url("/images/flags/1x1/jp.svg"); background-repeat: no-repeat; background-size: 25px 25px; }
mais ensuite, j'ai ajoutémin-width: 100%; min-height: 100%;
et il affiche l'image.J'ai le même problème. Mais il fonctionne correctement pour moi
A fonctionné pour moi.
Il est toujours bon d'avoir ces propriétés supplémentaires en plus de la
background-image:url('chemin') no-repeat 0 0;
dimensions de l'ensemble de l'élément
Vous devez utiliser un chemin relatif dans l'URL. Je pense que vous avez fait deux dossiers dans le répertoire racine où votre index.html réside. L'un est 'CSS' dossier & un autre est le 'img' dossier.
Maintenant, si vous avez accès à 'img' dossier dans les fichiers css. Donc, vous devez revenir en arrière une fois dans le répertoire racine, à l'aide de "../" syntaxe. Puis passer à la 'img' dossier à l'aide de "../img syntaxe". Ensuite, écrivez le nom de l'image "../img/debut_dark.png".
Je suis à l'aide de CSS intégré sur un ordinateur local. J'ai mis le atom.jpg fichier dans le même dossier que mon fichier html, ce code a fonctionné:
Eh bien, je compris que cet attribut d'affichage de l'image, lorsque l'emplacement est mis à disposition. J'ai simplement téléchargé l'image sur mon serveur, et lié à l'emplacement de l'image dans le background-image:url("xxxxx.xxx"); attribut et finalement il a travaillé, mais les gars si vous n'avez pas de serveur, puis essayez de saisir l'intégralité de l'emplacement de l'image dans l'attribut en allant dans propriété de l'image. Bien que j'ai été à l'aide de cet attribut dans la balise d'un fichier HTML, mais il va sûrement fonctionne sur fichier CSS aussi. Si cette méthode ne fonctionnait pas, alors essayez de télécharger votre image sur internet comme behance, facebook, instagram,etc et d'inspecter l'image et copier l'emplacement de votre attribut.. Espérons que Cela va fonctionner
J'ai eu le même problème, après j'ai supprimer la répétition 0 0 partie, il a résolu mon problème.
Si votre chemin d'accès est correct alors je pense que vous n'avez pas de n'importe quel élément dans un corps d'article.
Il suffit de définir la hauteur du corps et de votre code fonctionne.
J'ai eu le même problème. Pour moi, il a travaillé avec:
Fondamentalement, le problème est avec le chemin d'accès au fichier.
La barre oblique au début de l'url rend recherchez le fichier à la racine. Retrait, il sera un chemin par rapport à ce fichier css comme ceci:
background-image: url(img/debut_dark.png);
Si vous utilisez de l'Atome, de la copie du projet de chemin d'accès de l'image comprend parfois une barre oblique dans le chemin d'accès copié, alors soyez prudent.