0

I'm trying to make background image transparent only, I know that I can make it by adding opacity at CSS :after. But it seems my code editing script or css has a problem and I don't know why.

I'm trying to check what's wrong with my code. I was expecting to see red-colored background with this code, but I can't see any red color

<head>
<style type="text/css"> #chattingBox:after { background-color: red !important;}</style>
</head>
<body>
<div id="chattingBox" style="overflow: scroll; height: 150px; border: 1px solid black; background: url("/images/large/5.png") center center / 100px no-repeat;"></div>
</body>

I can see red color when I write CSS as '#chattingBox { background...'(without :after) so I guess it's problem about :after but I don't have any idea to get through this.

If :after problem can be solved, I can set opacity also, does anybody knows why :after is not working?

Improve this question

1 Answer 1

Reset to default
7

That’s because your :after pseudo element is empty. If you add some content such as:

#chattingBox:after {
    content: "\A0";
    background-color: red !important;
}

Then you will see something. The \A0 is the code for a non-break space (equivalent to HTML &nbsp;, but any content will do.

Generally, :after and :before are incomplete without content of some sort.

Improve this answer
0

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