How can I change a background image opacity without changing on div content?

Because all children of an element are affected by its CSS, you cannot simply set the opacity of a background-image, however, there are several workarounds to this:

1. Use transparent background images (easiest imo)

Rather than setting the background image's opacity after the fact, just make the background image transparent in your favorite image editor (try gimp, it's free!) and save it as an image with transparency (like PNG).

2. Use positioning.

If you make the parent element have relative positioning and absolutely position child elements inside, you take them out of the flow and they will not be affected by the opacity of the parent. [Source]

3. Use sibling elements in the same position

If you separate the content from the parent and make the two elements siblings, you can position the elements that were children over the parent with z-indexing and set the opacity of the parent without affecting the child.

---

There are more, but one of those should get you what you want.

DEMO

You can use after or before pseudo element for background-image.

Css:

.has-bg-img{
    position: relative;
}
.has-bg-img:after {
    content:'';
    background: url('http://placehold.it/500x100') no-repeat center center;
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:-1;
    opacity: 0.2; /* Here is your opacity */
}