web-dev-qa-db-fra.com

Image d'arrière-plan non affichée

J'essaie de transformer les images qui apparaissent sur le site à l'aide de la balise en image d'arrière-plan. Mon premier code ressemblait à ceci

Html:

<img class= "house" src="images/House-03.png" width="122px" height="118px"/>

CSS

.house {
display:block;
position:absolute;
float:right;
bottom:0;
right:0;

}

Maintenant j'essaye de le changer comme ceci:

Html

<p class= "house"> </p>

CSS

.house {
    display:block;
    position:absolute;
    background-image:url(../images/House-03.png);
    width:122px;
    height:148px;
    float:right;
    bottom:0;
    right:0;
}

Sauf que l'image n'apparaît pas! Toute aide sera appréciée, merci!

htmlcssbackgroundbackground-image
11
kduan

essayez de définir la propriété de taille de l'image d'arrière-plan

.house {
    display:block;
    position:absolute;
    background:url(../images/House-03.png);
    background-repeat:no-repeat;
    background-size: 100% 100%;
    width:122px;
    height:148px;
    float:right;
    bottom:0;
    right:0;
}

j'espère que cela t'aides?

22
rand0m

mettre des citations autour de votre URL d'image

background-image:url("../images/House-03.png");

ETA: par commentaire ci-dessous ... les devis ne sont en effet pas nécessaires! viens de le mentionner ici pour résoudre la question initiale. 

2
user3037493

Personnellement, le chemin et la syntaxe de l'URL étaient corrects. Le seul problème était 

background-img: url("")

besoin d'être changé pour ..

background: url("")

Et mon motif de fond s’est révélé triomphant.

2
haej

Assurez-vous que votre image est accessible! 

Après beaucoup de frustration, il s’est avéré que mon problème tenait au fait que l’image n’était pas accessible ... Vous pouvez toujours tester votre code avec une autre image sur un autre site certainement accessible ...

1
Damian Green