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;
}
This question is related to
css
background-image
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 {_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_
Note that this method allows you to scale the background image, as well as keep the ability to use margins and padding for layout.
you can set an image URL for the content prop instead of the background-image.
content: url(/img/border-left3.png);
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;
}
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.
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.
Source: Stackoverflow.com