I'd like to apply an opacity over a background image on my web page.

How do I achieve this? I just want it solely on the image area.

Here's my [JSFiddle](http://jsfiddle.net/c5nfd2rp/).

**HTML:**

```
<header class="main-header " style="background-image:url('http://cdn.c.photoshelter.com/img-get/I00004urs0axX2VI/s/860/860/0801A130.jpg');">

        <div class="sticky-header">
            <div class="row">
                <nav class="medium-10 columns primary menu">
                    <ul class="inline naked">
                        <li><a href="">test</a></li>
                    </ul>
                </nav>
            </div>
        </div>

```

CSS:

```
.sticky-header {
padding-top: 30px;
width: 100%;
margin: 0 auto;
position: fixed;
z-index: 1000;
background-color: #ffffff;
background-size: auto 100%;
border-bottom: 5px solid #f2f2f2;
top: 0;
left: 0;
}

.main-header {
width: 100%;
max-width: 1480px;
position: fixed;
background-image: url("http://cdn.c.photoshelter.com/img-get/I00004urs0axX2VI/s/860/860/0801A130.jpg");
background-position-y: -30px;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center top;
position: relative;
transition: background-position ease-in 0.3s;
height: 720px;
margin: 0 auto;
}

```

Thanks for any help