There is a block with a lighted picture and plain text on it, as well as from the top and bottom there is a frame of the picture in the form of triangles. But when setting the opacity , the triangles light up. I tried to put this frame as the main block background-image , but the effect is the same
main .about .about_jovi { display: flex; flex-direction: column; justify-content: center; height: 600px; width: 100%; position: relative; background-color: #FFCCCC; z-index: 0; } main .about .about_jovi .jovi_img { height: 600px; width: 100%; background-attachment: local, local, local, local, fixed; background-image: linear-gradient(320deg, #fffbf2 10px, transparent 11px), linear-gradient(40deg, #fffbf2 10px, transparent 11px), linear-gradient(40deg, transparent 10px, #fffbf2 11px), linear-gradient(320deg, transparent 10px, #fffbf2 11px), url(http://cs5.pikabu.ru/post_img/big/2015/12/20/5/1450595196112767954.jpg); background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat; background-size: 15px 15px, 15px 15px, 15px 15px, 15px 15px, 100% 100%; background-position: bottom, bottom, top, top; opacity: .6; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; } main .about .about_jovi h1 { font-family: master-of-break; font-size: 51px; text-align: center; padding: 0 15px; line-height: 90px; } main .about .about_jovi p { font-family: bell; font-size: 30px; text-align: right; padding: 0 170px 0 0; } <div class="about_jovi"> <div class="jovi_img"></div> <h1>There`sa vintage which comes with ages and experience.</h1> <p>Jon Bon Jovi</p> </div> 