:before and background-image… should it work?

Question

I\'ve got a div and apply :before and :after an image as content. That works perfectly. Now I would need to apply a background image so it does repeat

Answer 1

The problem with other answers here is that they use position: absolute;

This makes it difficult to layout the element itself in relation to the ::before pseudo-element. For example, if you wish to show an image before a link like this:

Here's how I was able to achieve the layout in the picture:

a::before {
  content: "";
  float: left;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background: url(../../lhsMenu/images/internal_link.png) no-repeat 0 0;
  background-size: 80%;
}

Note that this method allows you to scale the background image, as well as keep the ability to use margins and padding for layout.