Placing an image behind a border and 2 vertical lines

Question

What I want to do is to place an image behind a border and 2 vertical lines. I was thinking the vertical lines could be SVG, but I'm not sure how to set this up.

https://jsfiddle.net/q5xnxqkk/

<svg style="background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );border: 3px solid #0059dd;padding: 62px 100px 62px 100px;  cursor: pointer;background-color:black;"
  width="60" height="72" viewBox="0 0 60 72">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"
    fill="#E6DC00"></path>
    <path fill="#E6DC00 " d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" /></path>
  </svg>

Answer 1

The blue lines inside the box are not SVG paths, those are part of the linear-gradient, since you have it there I assume you know about how background image works.

There can be two approaches, one is to scrap the linear-gradient part from your SVG's background-image and instead use the url('URL-TO-IMAGE'), and for the lines use SVG's <path>. I am not an expert in SVG so can't tell you how to do that.

The second approach which I would recommend is to use multiple backgrounds, yes, CSS allows layers of background images / gradients / colors and it is pretty simple.

background-image: url("image-1.png"), url("image-2.png");

or

background-image: linear-gradient(....), url("image-2.png");

Currently your SVG's background-image property is

background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );

To have another image / linear gradient behind the current one you just separate the parts using a comma, like this

background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px ), url('http://via.placeholder.com/200x200');

But even if you do this you won't see the image at http://via.placeholder.com/200x200 in the box, that is due to the fact that there are fully opaque colors in your linear-gradient, well, let's change all the #000000 in your linear-gradient's value to transparent

background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px ), url('http://via.placeholder.com/200x200');

Here's a working demo:

<svg style="background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px,transparent  174px, #0059dd 174px, #0059dd 177px, transparent 177px ), url('http://via.placeholder.com/200x200');border: 3px solid #0059dd;padding: 62px 100px 62px 100px;  cursor: pointer;background-color:black; background-position: center;"
  width="60" height="72" viewBox="0 0 60 72">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"
    fill="#E6DC00"></path>
    <path fill="#E6DC00 " d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" /></path>
  </svg>

Please study the code and experiment with it, that's the best way to learn more!

Answer 2

i see this, which has 2 vertical lines

And a snippet:

svg {
  border:3px solid #0059dd;
  padding:62px 100px 62px 100px;
  cursor:pointer;
  background-color:#aaaaaa
}

<svg width="60" height="72">
   <path fill="#000000" d="M30.001,12 C16.767,12,6,22.765,6,35.999 s10.766,23.999,24,23.999 s24-10.765,24-23.999 S43.235,12,30.001,12 L30.001,12 z"/>
   <path fill="#E6DC00"d="M39.201,34.34l-12-9 c-0.607-0.455-1.419-0.528-2.095-0.189 c-0.677,0.339-1.106,1.031-1.106,1.789 v18 c0,0.758,0.428,1.45,1.106,1.789 c0.283,0.142,0.589,0.211,0.894,0.211 c0.425,0,0.847-0.136,1.2-0.4 l12-9 c0.503-0.377,0.8-0.97,0.8-1.6 C40.001,35.31,39.705,34.717,39.201,34.34 z"/>
   <path fill="#E6DC00 "d="M30,15 c11.598,0,21,9.402,21,20.999 s-9.401,20.999-21,20.999 c-11.599,0-21-9.402-21-20.999 S18.401,15,30,15  M30,9 C15.112,9,3,21.111,3,35.999 s12.112,26.999,27,26.999 c14.888,0,27-12.111,27-26.999 S44.888,9,30,9 L30,9 z"/>
   <path stroke="#0059dd" stroke-width="3" d="M -17,-62 v 196 M 77,-62 v 196"/>
</svg>

Answer 3

Like this?

svg {
  border:3px solid #0059dd;
  padding:62px 100px 62px 100px;
  cursor:pointer;
  background-color:black
}

  <svg width="60" height="72">
     <path fill="#E6DC00"d="M39.201,34.34l-12-9 c-0.607-0.455-1.419-0.528-2.095-0.189 c-0.677,0.339-1.106,1.031-1.106,1.789 v18 c0,0.758,0.428,1.45,1.106,1.789 c0.283,0.142,0.589,0.211,0.894,0.211 c0.425,0,0.847-0.136,1.2-0.4 l12-9 c0.503-0.377,0.8-0.97,0.8-1.6 C40.001,35.31,39.705,34.717,39.201,34.34 z"/>
     <path fill="#E6DC00 "d="M30,15 c11.598,0,21,9.402,21,20.999 s-9.401,20.999-21,20.999 c-11.599,0-21-9.402-21-20.999 S18.401,15,30,15  M30,9 C15.112,9,3,21.111,3,35.999 s12.112,26.999,27,26.999 c14.888,0,27-12.111,27-26.999 S44.888,9,30,9 L30,9 z"/>
     <path stroke="#0059dd" stroke-width="3" d="M 10,-62 v 196 M 50,-62 v 196"/>
  </svg>

JSFiddle