: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 as the div resizes, but it does not seem to work. Is background image on :before and :after supposed to be working?

The current code:

HTML:

<div id="videos-part">test</div> 

CSS:

#videos-part{     background-color: #fff;     height: 127px;     width: 764px;     margin: -6px 0 -1px 18px;     position: relative; } #videos-part:before{     width: 16px;     content: " ";     background-image: url(/img/border-left3.png);     position: absolute;     left: -16px;     top: -6px; } 

Answer 1

@michi; define height in your before pseudo class

CSS:

#videos-part:before{     width: 16px;     content: " ";     background-image: url(/img/border-left3.png);     position: absolute;     left: -16px;     top: -6px;     height:20px; } 

Answer 2

Background images on :before and :after elements should work. If you post an example I could probably tell you why it does not work in your case.

Here is an example: http://jsfiddle.net/namas/3/

You can specify the dimensions of the element in % by using background-size: 100% 100% (width / height), for example.