Bom dia, então utilizei a classe img-fluid porem não deu muito certo, porque o problema está no NAVBAR e na escrita grande, o img-fluid é tratamento para imagem, porque a imagem que está atrás esta responsiva é mais o NAVBAR e a escrita grande,
Escrita "INOVAÇÃO E TECNOLOGIA PARA O TRÂNSITO"
Como está o CSS :
.img-parallax {
width:100%;
display:table;
height:auto;
padding: 100px 0;
color:#fff;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
-o-background-size:cover;
z-index: -1;
position: absolute;
top: 0;
left: 50%;
NavBar:
HTML
<div class="topnav fixed-top" >
<img align="left" src="img/coesma.svg" width="200" height="52" alt="Coesma" ></a>
<a rel="noopener" href="#services">Soluções</a>
<a rel="noopener" href="#portfolio">Serviços</a>
<a rel="noopener" href="#about">Empresa</a>
<a rel="noopener" href="#contact">Contato</a>
</div>
CSS
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color:#4CAF50;
color: #f2f2f2;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}