Mask border with transparent png?

  • A+

Racking my brain over this and can't come up with a solution.

Conceptually, the thought is to:

  • have a div with background image of house and copy
  • ::before element for border
  • ::after for logo

Problem is the logo masking of the border.

As far as I know this isn't possible. Any ideas (must have decent browser support)?

Mask border with transparent png?

Mockup code:

.hero-banner {   width: 100%;   height: 40vw;   background-image: url('');   background-repeat: no-repeat;   background-size: cover;   background-position: center;   margin: 0;   padding: 0;   position: relative; }  .hero-banner h1 {   color: #fff;   position: absolute;   top: 40%;   left: 200px; }  .hero-banner h1 small {}  .hero-banner::after {   content: "";   position: absolute;   top: 70px;   right: 70px;   bottom: 70px;   left: 70px;   border: 1px solid #fff; }  .hero-banner::before {   content: url('');   position: absolute;   top: 10px;   right: 150px;   height: 122px;   width: 300px; }
<div class="hero-banner">   <h1><small>The Story of</small><br/>This House</h1> </div>


Try this it's very essay  <div>  <fieldset>   <legend align="right"><img src="" alt="Mask border with transparent png?"></legend>   <p>some text here</p>  </fieldset> </div> <style> div{padding:30px;background: url( no-repeat  center center; background-size: cover;}  fieldset{border:2px solid #fff;padding:10px;} legend img{  width:100px;  } </style>


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: