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    lt div id  videos-part  gt test lt  div gt    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

User · Answer

For some reason  I need float property of a pseudo-element to be set to left or right for the image to appear  height and width of the pseudo-element should be both set but not in percentage  I m on Firefox 67

User · Answer

color  transparent     make the tricks for me   videos-part before      font-size  35px      line-height  33px      width  16px      color  transparent      content   AS YOU LIKE       background-image  url  data image svg xml base64 PD94bWwgdmVyc2lvbj0iMS4wIiA PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik04LDE0TDQsNDloNDJsLTQtMzVIOHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik0zNCwxOWMwLTEuMjQxLDAtNi43NTksMC04ICBjMC00Ljk3MS00LjAyOS05LTktOXMtOSw0LjAyOS05LDljMCwxLjI0MSwwLDYuNzU5LDAsOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8 PGNpcmNsZSBjeD0iMzQiIGN5PSIxOSIgcj0iMiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTkiIHI9IjIiLz48L3N2Zz4         background-size  25px      background-repeat  no-repeat

User · Answer

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    x000D   x000D  a  before   x000D    content      x000D    float  left  x000D    width  16px  x000D    height  16px  x000D    margin-right  5px  x000D    background  url       lhsMenu images internal link png  no-repeat 0 0  x000D    background-size  80   x000D    x000D   x000D   x000D    Note that this method allows you to scale the background image  as well as keep the ability to use margins and padding for layout

User · Answer

you can set an image URL for the content prop instead of the background-image  content  url  img border-left3 png

User · Answer

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

User · Answer

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

[css] :before and background-image... should it work?

Examples related to css

Examples related to background-image