CSS background image URL - css

Question

I want to insert an image in CSS bubble, the code is correct but nothing appears,
can you please check how to solve this one
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
/*border-radius: 10px;*/
background: linear-gradient(top, #f9d835, #f3961c);
}
now before
.triangle-isosceles:before {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
the last one is after
.triangle-isosceles:after{
content: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
background: #3365d4;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}

Answer 1

In the "after" version, you have two errors:
content: This is not the correct tag to specify the background, the correct one would be simply "background"
background: As you may figure by reading the first error, the background property you have defined is the one who is specifiying the background. This tag has to be removed as it will be overwritten if is not deleted.
So the CSS should loke like this:
.triangle-isosceles:after {
background: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
You should also consider to add compatibility with more browsers. You can find more information at this page: https://www.w3schools.com/cssref/css3_pr_background-size.asp
EDIT: This is an example of a working CSS tag that add a background image to a "div":
#headerwrap {
background: url(../images/homepage/header.jpg) no-repeat center top;
margin-top: 60px;
padding-top: 20px;
text-align: center;
background-attachment: relative;
background-position: center center;
min-height: 600px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hope this helps :)

Answer 2

You need to add content also, Without content after and before won't work
Like this :
.triangle-isosceles:after {
content :'';
background: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}