CSS pseudo after/before using content or background for img?

Question

As for pseudo-elements :after/:before there are apparently two ways if I want to display image there:

1. using background-image:url(imgurl.png);
2. using content:url(imgurl.png);

Are both ways correct and valid? Why should I be using one way over another?

Apparently using the second method you cannot set the picture properties like size. But first method is generaly more taught on internet.

Ideas?

Answer 1

It depends on what your image is, just like the debate between using an <img> tag vs using background-image in your CSS.

If your image is part of your page's content, use content:url(imgurl.png);. Certainly if you want the images to be interactive or to to inform the user's experience while on your page, use content. If your image is just stylistic for your site's visual design, use background-image:url(imgurl.png);

Also, do note that you should use double colons: ::before and ::after. Only IE8 requires the single-colon versions.