I am using linear-gradient for my background-image. That was working well until I set background-attachment to fixed.
How can I do same effect with background-attachment: fixed;
.photo { background-image: linear-gradient( to bottom, rgba(255,255,255,0) 80%, rgba(255,255,255,1) 100% ), url(https://s30.postimg.org/v67rh5bdd/image.jpg); background-attachment: unset; /* 'fixed' does not work */ background-position: center top; background-repeat: no-repeat; width: 100%; height: 55vh; position: absolute; } .panel { margin-top:30vh; } .panel-body { height: 100vh; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container"> <div clasas="row"> <div class="photo"></div> <div class="col-xs-10 col-xs-offset-1"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html>
