From https://scotch.io/quick-tips/how-to-change-a-css-background-images-opacity

new_gist_file.css

.my-container {     position: relative;     background: #5C97FF;     overflow: hidden; } /* You could use :after - it doesn't really matter */ .my-container:before {     content: ' ';     display: block;     position: absolute;     left: 0;     top: 0;     width: 100%;     height: 100%;     z-index: 1;     opacity: 0.6;     background-image: url('http://placekitten.com/1500/1000');     background-repeat: no-repeat;     background-position: 50% 0;     -ms-background-size: cover;     -o-background-size: cover;     -moz-background-size: cover;     -webkit-background-size: cover;     background-size: cover; }