Question: I have a full screen fixed image and I would like to add an overlay over top but nothing I've tried has worked.

```
<div class="container">
    <div class="overlay">
        <img src="image.jpg" />
    </div>
</div>

.container {
    width: 100%;
    padding: 0;
}
.container>.overlay>img {
    position: fixed;
}
.container>.overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 3;
}

```

<https://jsfiddle.net/extyehqz/>

However this produces nothing

Answer: 
The best idea to go with this would be making the image the background image of the body. Here is a solution following this idea. If you really want it to be an image element let me know I will post a solution on that.
The main idea is to use 

```
background-color: rgba(...);

```

<https://jsfiddle.net/j1quLk7h/>
If I understand your question. That can be an approach.

```css
.container {
    width: 100%;
    padding: 0;
}
.container>img {

}
.container>.overlay {
    width: 100%;
    height: 100%;
    background: red;
    z-index: 3;
    position: fixed;
    opacity:0.4;
}
```

```html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="overlay">

    </div>

    <img src="http://goo.gl/2Xzi3L" />

</div>
```