two background inside one tag

Question

How can I give background both side just inside <h3> tag

<h3>heading goes here</h3>

As below:

+---+--------------------------+------+
|>>>+ heading goes here        |<<<   +
+---+--------------------------+------+

Like this?

h3{
background: url('path') no-repeat left center;
background: url('path') no-repeat right center;
}

update

---

Okay, I used like this one:

#custom-module .moduletable:nth-child(2) h3 {
    background: url(../images/icon-news.jpg)no-repeat center left;
    position: relative;
}
#custom-module .moduletable:nth-child(2) h3:after{
    background: url("../images/icon-news.jpg") no-repeat right center;
    content: " ";
    position: absolute;
    right: 0;
}

but the same background-image used in :after pseudo is not showing.

Answer 1

You could do as this:

h3{
background: url('path') no-repeat left center, 
url('path') no-repeat right center;
}

url separated by a comma.

see this url for different browser compatiblity before you use multiple backgrounds

As per your update

If you use :after pseudo element you should also define the width and height of the image you have like this:

#custom-module .moduletable:nth-child(2) h3 {
    background: url(../images/icon-news.jpg)no-repeat center left;
    position: relative;
}
#custom-module .moduletable:nth-child(2) h3:after{
    background: url("../images/icon-news.jpg") no-repeat right center;
    content: " ";
    position: absolute;
    right: 0;
    width: 20px;
    height: 20px;
}

Answer 2

There are 2 ways to achieve multiple backgrounds using CSS.

You can use the :before and :after pseudo-elements (tutorial with code).

h3 {
  position: relative;
}
h3:before {
   content: "";
   position: absolute;
   top: 0; left: 10px;
   background: #4aa929;
}
h3:after {
   content: "";
   position: absolute;
   top: 0; right: 10px;
   background: #fff;
}

Or you can use the multiple backgrounds feature of CSS3 (tutorial with code).

h3 {
    background: url('path') no-repeat left center, 
                url('path') no-repeat right center;
}