html, body {

    height: 100%;

}

​

body {

    margin: 0;

    position: relative;

    background: url("http://placeimg.com/500/500") no-repeat;

    background-size: cover;

}

  body:before {

      content: "";

      position: absolute;

      top: 0;

      bottom: 0;

      left: 0;

      right: 0;

      background: rgba(255,255,255,.5);

  }

​

​

.headline {

    margin: 0;

    position: relative;

    overflow: hidden;

    text-align: center;

}

​

  .headline:before,

  .headline:after {

      content: "";

      position: relative;

      display: inline-block;

      vertical-align: middle;

      width: 100%;

      height: 30px;

      background-size:

          100% 1px,

          30px 30px;

  }

​

    .headline:before {

        right: .5em;

        margin-left: -100%;

        background: 

            linear-gradient(90deg, #000, #000) repeat-x center,

            radial-gradient(10px, #000 0%, #000 100%, rgba(0,0,0,.0) 100%) no-repeat right -5px center;

         background-size:

          100% 1px,

          30px 30px;

    }

    .headline:after {

        left: .5em;

        margin-right: -100%;

        background: 

            linear-gradient(90deg, #000, #000) repeat-x center,

            radial-gradient(10px, #000 0%, #000 100%, rgba(0,0,0,.0) 100%) no-repeat left -5px center;

         background-size:

          100% 1px,

          30px 30px;

    }