enter image description here Not fundamentally, on pure css or with the help of any third-party libraries, you need to implement this feature. I know how to cutout with text if the block has a solid background color, but I don’t know how to do this with background-image



    1 answer 1

    If I correctly understood your goal, then it is quite achievable. And for this purpose it is enough just to use the fieldset and legend elements.

    I will not attach a background image, as I am afraid to violate copyrights, but in the css-code you will be able to specify background-image instead of background-color - the result will be the same.

     .wrapper { background-color: #aaaaaa; box-sizing: border-box; margin: 0; display: flex; } .group { border: 2px solid #ffffff; box-sizing: border-box; text-align: center; margin: 50px; color: #ffffff; padding: 50px 100px; } .group legend { padding: 0 80px; } 
     <div class="wrapper"> <fieldset class="group"> <legend>SERVICES</legend> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </fieldset> </div>

    Take this example as a basis and experiment with font styles and positioning elements.

    Good luck!