Quiero poner el nav
encima de una imagen y que al disminuir o agrandar la pantalla (responsive) se vea bien y guarde las proporciones. Así es como se ve ahora:
Esto es lo que tengo en mi código:
.box-nav {
margin-top: 2%;
margin-bottom: 0.5%;
background: rgb(6, 2, 1);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(6, 2, 1, 0.8) 0%, rgba(7, 4, 2, 0.8) 50%, rgba(10, 5, 2, 0.8) 99%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(6, 2, 1, 0.8) 0%, rgba(7, 4, 2, 0.8) 50%, rgba(10, 5, 2, 0.8) 99%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(6, 2, 1, 0.8) 0%, rgba(7, 4, 2, 0.8) 50%, rgba(10, 5, 2, 0.8) 99%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#060201', endColorstr='#0a0502', GradientType=0);
/* IE6-9 */
}
.box-nav img:hover {
filter: opacity(.5);
}
.nav-img {
background: url(https://placehold.it/1000x100/) no-repeat;
max-width: 100%;
background-size: 100%;
height: 179px;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="nav-img">
<div class="box-nav menu">
<nav class="nav nav-efecto">
<a class="nav-link Active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Disabled</a>
</nav>
</div>
</div>
</div>
</div>
</div>