web-dev-qa-db-fra.com

html div image d'arrière-plan ne s'affiche pas

Je travaille sur une page Web (je suis un newb bien sûr) et l'image d'arrière-plan n'apparaît pas dans la div. J'ai essayé à la fois background-image et background et les deux ne fonctionneront pas ... voici le code

si quelqu'un peut aider, ce serait génial !!

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
body {background-color:gray;}
</style>
  </head>
<body>
  <div style="background-image: url('/ximages/websiteheader1.png');height:200px;width:1200px;">
  </div>
</body>
</html>
htmlcssbackground
7
duxfox--

Je vous recommande de déplacer vos css de la portée en ligne . En supposant que votre fichier .png existe réellement, essayez de définir la taille de l’arrière-plan et de répéter les balises.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
body {background-color:gray;}
#mydiv {
   background-image: url('/ximages/websiteheader1.png');
   background-repeat:no-repeat;
   background-size:contain;
   height:200px;width:1200px;
}
</style>
  </head>
<body>
  <div id="mydiv">
  </div>
</body>
</html>

Si cela ne fonctionne pas, essayez de rechercher dans les outils de développement de votre navigateur les codes de réponse et assurez-vous que l'URL est correcte.

J'espère que cela t'aides!

12
Yani

Une petite et rapide leçon sur les chemins

Chemins absolus

http://website.com/folder/image.jpg
SI l'image est pas sur votre domaine - allez y chercher une image

//website.com/folder/image.jpg
image chargée à l'aide des protocoles http ou https 

Chemins relatifs

(Pour usage interne si l'image est sur le même serveur)

/folder/image.jpg
Similaire à Absolute Paths, en omettant simplement le protocole et le nom de domaine
Allez rechercher mon image à partir du dossier racine /, puis dans folder

image.jpg
image dans le même dossier que le document qui appelle l'image!

folder/image.jpg
cette fois dossier se trouve au même endroit que le document, donc allez dans le sous-dossierpour l'image

../folder/image.jpg
D'où se trouve le document, sélectionnez un dossier précédent../et entrez dansfolder

../../folder/image.jpg
go deux dossiers retour../../et ensuite aller dansfolder

../../image.jpg
go deux dossiers retour, voilà mon image!

16
Roko C. Buljan

Pour moi, c’était parce que j’utilisais une directive d’élément angulaire pour définir l’arrière-plan, mais j’ai oublié de régler "display" sur "block". Pouah! J'ai passé du temps à résoudre ce problème! Si cela avait été une directive d'attribut, je n'aurais probablement pas rencontré cela.

0
Helzgate

J'ai eu le même problème J'ai corrigé le chemin relatif pour commencer à partir du même dossier que la page et cela a fonctionné: url (./ images/1.jpg) au lieu de url (/images/1.jpg) J'ai lu quelque part qu'il est préférable de le faire toujours . laissez-moi savoir si cela fonctionne.

0
freddy