15

I have a div element with a triangle-border and I'm trying to place an image above it using an ::after pseudo-element with background-image. The method doesn't work though. However if I'm trying to set content: "asd";, the text appears correctly. Basically I just want to have a house image above that triangle.

Here's the HTML code:

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

And here's 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's a jsFiddle

6
  • 100% with/height of 0 is ... 0 so as your pseudo element has 0 width/height, it's background image isn't displaying
    – web-tiki
    Feb 21, 2015 at 13:34
  • I set the #estatecorner width and height to 100px. Still doesn't work.
    – Radu
    Feb 21, 2015 at 13:36
  • really?
    – web-tiki
    Feb 21, 2015 at 13:37
  • 1
    @Radu: Is this what you are looking for?
    – Harry
    Feb 21, 2015 at 13:53
  • 1
    Yes, that's exactly what I wanted! Thanks a lot! Can you post it as an answer so I can reward you? :D
    – Radu
    Feb 21, 2015 at 13:54

3 Answers 3

20

There were two things to take note of here:

  1. As web-tiki had mentioned in comments, the width and height of the pseudo-element were set to 100% and the parent element had dimensions of 0px x 0px (because the triangle was generated through border hack). Because of this the actual calculated dimensions of the child (pseudo-element) were also 0px x 0px and hence the image was not showing up. The content did show up when you put plain text because text typically overflows. The solution to this problem is to assign an explicit height & width to the child pseudo-element (as assigning a height & width to the parent would spoil the border hack).

  2. When background-image is assigned to a pseudo-element and the size of the image 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 to position the image within the triangle we have to use the background-position property with the appropriate position values in pixels or percentages depending on the needs.

Below is the final snippet (with sample values for height, width & 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 below is an alternate approach using a rotated pseudo-element (CSS3 transforms) instead of the border hack to achieve the triangle shape.

#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>

3

Please try this;

 #estatecorner.house::after {
        content: url('../img/yourimage.jpg');
        position: absolute;
        left:0px;
        width: 100%;
        height: 100%;
    }
4
  • Is the code in your fiddle and that in the answer same?
    – Harry
    May 9, 2015 at 7:49
  • No I have changed : Please take it from Fiddle :)
    – Vinayak
    May 9, 2015 at 7:58
  • The modified solution is nice and worthy of a vote. Please remove your other answer as it is essentially a duplicate of your own answer.
    – Harry
    May 9, 2015 at 8:02
  • Yes, removed the other ans.
    – Vinayak
    May 9, 2015 at 8:07
0

You need to give 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 have dimensions of 0 x 0. So, if you give 100% height and width to its psuedo elements then their dimensions will eventually be 0 x 0 too which would be useless.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.