Css:
.bio {
width: 100%;
min-width: auto;
height: auto;
min-height: 600px;
background-color: #fff;
background-image: -webkit-linear-gradient(30deg, #fff 50%, #004E95 50%);
}
What it generates:
But I would like to change #004E95 for an imgem, does anyone know what changes I must make to make this possible?
First to have the image you have to do the image, be it in Photoshop, Corel and other software. Or you make an SVG that is a vector image that is interpreted by the Browser, there you put the color you want.
To apply in HTML I will give you two options. One with Background-image as in your template. And another one with :: after.
Template with background-image
body {
width: 100%;
height: 100%;
margin: 0;
}
.bg {
width: 100%;
height: 300px;
background-image: url(http://engiobra.com/wp-content/uploads/2014/06/trapezio.png);
background-position: center left 350px;
background-repeat: no-repeat;
background-size: 100% 350px;
}<div class="bg"></div> Template with ::after
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
.bg {
width: 100%;
height: 300px;
overflow: hidden;
}
.bg::after {
content: url(http://saogeraldo.com/wp-content/uploads/2016/09/Produto-saogeraldo-trapezio-black-decortiles.jpg);
position: absolute;
width: 100%;
transform: translate(60%, -27%);
overflow: hidden;
}<div class="bg"></div>