71

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;
}
5
  • 2
    Paste your code into your question.
    – BoltClock
    Aug 26, 2011 at 11:02
  • Updated the question with my code
    – Michi
    Aug 26, 2011 at 11:22
  • 3
    My problem was missing content. It needs to have some content to apply the background. Jul 11, 2013 at 14:50
  • Thanks @Neolisk... important detail :-)
    – Michi
    Jul 11, 2013 at 15:19
  • Yeah but you can't apply hover effect on it then. Oct 6, 2016 at 8:06

6 Answers 6

90

@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;
}
4
  • 2
    Hi Sandeep... I can't use height as the div will resize depending on its content.
    – Michi
    Aug 26, 2011 at 11:42
  • 2
    Hmm... I just tried to put the height and the background image appears :-( Will I really have to use JS to change the height dynamically?
    – Michi
    Aug 26, 2011 at 11:44
  • 2
    I just added height: 100% and it works :-) Stupid me that I haven't thought of it before. Thanks very much Sandeep :-)
    – Michi
    Aug 26, 2011 at 11:45
  • This wouldn't work for me using background-color. Had to use background: #295b79 url('../images/image.png') no-repeat; Apr 25, 2014 at 15:15
8

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.

1
  • 1
    Hi Meo, I've updated my question with the code I'm using. Thanks for helping :-)
    – Michi
    Aug 26, 2011 at 11:22
4
 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;
    }
3

you can set an image URL for the content prop instead of the background-image.

content: url(/img/border-left3.png);

This itself wont solve everything. Need to consider repeat, size, position etc using other properties.

2

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: enter image description here

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.

1

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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

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