: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;
}

My problem was missing `content`. It needs to have some content to apply the background. — Victor Zakharov, Jul 11 '13 at 14:50

score 90 · Accepted Answer · answered Aug 26 '11 at 11:35

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;
}

answered Aug 26 '11 at 11:35

sandeep

91,313
23
137
155

2

Hi Sandeep... I can't use height as the div will resize depending on its content. – Michi Aug 26 '11 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 '11 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 '11 at 11:45
This wouldn't work for me using background-color. Had to use background: #295b79 url('../images/image.png') no-repeat; – Ben Racicot Apr 25 '14 at 15:15

score 8 · Answer 2 · edited May 08 '14 at 23:21

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.

edited May 08 '14 at 23:21

Brian Jordan

2,377
3
21
29

answered Aug 26 '11 at 11:04

meo

30,872
17
87
123

1

Hi Meo, I've updated my question with the code I'm using. Thanks for helping :-) – Michi Aug 26 '11 at 11:22

score 4 · Answer 3 · answered Aug 24 '18 at 08:41

 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;
    }

score 3 · Answer 4 · edited Oct 07 '21 at 16:07

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.

edited Oct 07 '21 at 16:07

Arun Prasad E S

9,489
8
74
87

answered Jan 27 '21 at 05:40

Mohammadreza Abdoli

784
7
10

score 2 · Answer 5 · answered May 15 '20 at 04:00

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.

score 1 · Answer 6 · answered Jul 10 '19 at 12:25

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.

answered Jul 10 '19 at 12:25

StSav012

776
5
15

:before and background-image... should it work?

6 Answers6

Linked