The pseudo-element background image does not appear

Question

I have a div element with a triangular border, and I'm trying to place an image above it using the ::after pseudo-element with background-image . However, the method does not work. However, if I try to set content: "asd"; , the text will be displayed correctly. Basically, I just want to have an image of the house above this triangle.

Here is the HTML code:

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

And here is the 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: " "; } 

Here jsFiddle

Answer 1

Here it was necessary to pay attention to two things:

• As noted in the comments web ticks in the comments, the width and height for the pseudo-element were set to 100% , and the parent element was 0px x 0px (since a triangle was created through the border hack). Because of this, the actual calculated dimensions of the child (pseudo-element) were also 0px x 0px, and therefore the image was not shown. The content was displayed when you added plain text, because the text usually overflows. The solution to this problem is to assign an explicit height and width to the child pseudo-element (since assigning height and width to the parent object can ruin the hacker spacing).

• When a background-image is assigned to a pseudo-element and the image size is small compared to the container (pseudo-element), the background image is repeated as many times as possible to fit the container element. This should be avoided by setting background-repeat: no-repeat; and placing the image in a triangle, we must use the background-position property with the corresponding position values ​​in pixels or percent, depending on the needs.

The following is the final snippet (indicating the values ​​of height, width and position):

 #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; content: ""; width: 80px; height: 80px; background: url("http://i.imgur.com/nceI30v.png"); background-repeat: no-repeat; background-position: 75% 40%; } 

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

---

The following is an alternative approach using a rotated pseudo-element (CSS3 transform) instead of a hacker to achieve the shape of a triangle.

 #estatecorner { position: absolute; width: 80px; height: 80px; right: 0px; overflow: hidden; } #estatecorner:before { position: absolute; content: ''; top: -80px; right: -80px; height: 138.4px; width: 138.4px; /* (80 * 1.732px) */ background: #67b2e4; transform: rotate(45deg); z-index: -1; } #estatecorner.house { background-image: url("http://i.imgur.com/nceI30v.png"); background-repeat: no-repeat; background-position: 75% 35%; } 

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

Answer 2

Try it;

  #estatecorner.house::after { content: url('../img/yourimage.jpg'); position: absolute; left:0px; width: 100%; height: 100%; } 

Answer 3

You need to specify the height and width of the psuedo elements in px, and not in% for this case.

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

the reason is that #estatecorner is 0 x 0 in size. So, if you give 100% height and width to the psuedo elements, then their sizes will end up being 0 x 0 too, which would be useless.