Le Pseudo-élément de l'image de fond ne s'affiche pas

J'ai un div élément avec un triangle-frontière et je suis en train de placer une image au-dessus d'elle à l'aide d'un ::after pseudo-élément avec background-image. La méthode ne fonctionne pas bien. Toutefois, si je suis en train de définir content: "asd";, le texte s'affiche correctement. Fondamentalement, je veux juste avoir une maison de l'image au-dessus de ce triangle.

Voici le code HTML:

<div id = "estatecorner" class = "house"></div>

Et voici le CSS:

#estatecorner {
  position: absolute;
  right: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 80px 0;
  border-color: transparent #67b2e4 transparent transparent;
}

#estatecorner.house::after {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(images/mini/house.png);
  content: " ";
}

Voici un jsFiddle

100% avec/hauteur de 0 ... 0 de sorte que votre pseudo élément a 0 largeur/hauteur, c'est l'image de fond ne s'affiche pas
J'ai mis le #estatecorner largeur et la hauteur de 100px. Ne fonctionne toujours pas.
vraiment?
ceci ce que vous recherchez?
Oui, c'est exactement ce que je voulais! Merci beaucoup! Pouvez-vous poster une réponse afin que je puisse vous récompenser? 😀

OriginalL'auteur Radu | 2015-02-21

  1. 3

    S'il vous plaît essayer ce; 

     #estatecorner.house::after {
        content: url('../img/yourimage.jpg');
        position: absolute;
        left:0px;
        width: 100%;
        height: 100%;
    }
    Avez-vous essayé votre code OP fiddle et voir si cela fonctionne?
    Ici : Vous pouvez consulter jsfiddle.net/sdeheu0u
    Est le code dans votre violon, et que, dans la réponse même?
    Non, je n'ai changé : Merci de prendre de Violon 🙂
    La solution modifiée est belle et digne d'un vote. Veuillez retirer votre autre réponse, comme c'est essentiellement un duplicata de votre propre réponse.

    OriginalL'auteur Vinayak

  2. 0

    Vous avez besoin de donner de la hauteur et la largeur de la pseudo-éléments en px et pas en % pour ce cas.

    #estatecorner.house::after {
    position: absolute;
    width: 14px;
    height: 13px;
    background: url(http://i.imgur.com/nceI30v.png) no-repeat;
    content: " ";
    left: 50px;
    top: 20px;
}

    La raison est que #estatecorner avoir des dimensions de 0 x 0. Ainsi, si vous donnez 100%
    hauteur et largeur à son pseudo éléments, puis leurs dimensions seront éventuellement 0 x 0 trop ce qui serait inutile.

    OriginalL'auteur Dhruvil21_04