Removing the middle of the background, keeping only the border

Question

Can this be done?

How can I make the middle of the background completely transparent?

This would make the middle part transparent, and would have nothing applied to it.

It looks like this now.

I'm trying to do this.

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.curtain {
  max-width: 640px;
  margin: auto;
  border: 15px solid transparent;
  border-radius: 12px;
  background: linear-gradient(to bottom right, gray, black), url("https://i.imgur.com/pwdit9N.png"), linear-gradient(to bottom right, #eee, #ccc);
  background-origin: padding-box, border-box, border-box;
  background-clip: padding-box, border-box, border-box;
  box-shadow: 0 -1px white, 0 -1px 0 1px #bbb, 0 2px 0 1px #aaa, 0 2px 10px 1px rgb(0 0 0 / 20%);
}

.curtain-ratio-keeper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  background: transparent;
}

<div class="outer">
  <div class="tcell">


    <div class="curtain">
      <div class="curtain-ratio-keeper">


      </div>
    </div>
  </div>
</div>

What is the purpose of doing that, leaving a floating transparent rectangle over the bg image, or making a whole out of the union of both? The answer to my question is the key to work on the answer of your question. — SIMBIOSIS surl, Aug 04 '21 at 02:47

score 1 · Answer 1 · answered Aug 03 '21 at 00:20

1

Use mask

.curtain {
  max-width: 640px;
  margin: auto;
  border: 15px solid transparent;
  border-radius: 12px;
  background: 
    linear-gradient(to bottom right, gray, black), 
    url("https://i.imgur.com/pwdit9N.png"), 
    linear-gradient(to bottom right, #eee, #ccc);
  background-origin: padding-box, border-box, border-box;
  background-clip: padding-box, border-box, border-box;
  box-shadow: 1px 1px 3px black inset, 0 -1px white, 0 -1px 0 1px #bbb, 0 2px 0 1px #aaa, 0 2px 10px 1px rgb(0 0 0 / 20%);
  
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.curtain:before {
  content:"";
  display:block;
  padding-top: 56.25%;
}

body {
 background:linear-gradient(90deg,lightblue,red);
}

<div class="curtain"> </div>

To keep some of the box-shadow you can adjust the size:

.curtain {
  max-width: 640px;
  margin: auto;
  border: 15px solid transparent;
  border-radius: 12px;
  background: 
    linear-gradient(to bottom right, gray, black), 
    url("https://i.imgur.com/pwdit9N.png"), 
    linear-gradient(to bottom right, #eee, #ccc);
  background-origin: padding-box, border-box, border-box;
  background-clip: padding-box, border-box, border-box;
  box-shadow: 1px 1px 3px black inset, 0 -1px white, 0 -1px 0 1px #bbb, 0 2px 0 1px #aaa, 0 2px 10px 1px rgb(0 0 0 / 20%);
  
  -webkit-mask:
    linear-gradient(#fff 0 0) center/calc(100% - 4px) calc(100% - 4px) padding-box no-repeat,
    linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.curtain:before {
  content:"";
  display:block;
  padding-top: 56.25%;
}

body {
 background:linear-gradient(90deg,lightblue,red);
}

<div class="curtain"> </div>

answered Aug 03 '21 at 00:20

Temani Afif

245,468
26
309
415

Is that the only way to do it, are there other way? – Aug 03 '21 at 01:25
1

@csshtmljavascript14578 maybe, I provided *one* way – Temani Afif Aug 03 '21 at 08:34
1

@csshtmljavascript14578 I don't see any update, my answer still meet the requirements – Temani Afif Aug 03 '21 at 23:12
Maybe there's a better way to do it. – Aug 03 '21 at 23:14
1

@csshtmljavascript14578 not sure what you mean by *better*. a solution either work or not. *better* doesn't make sense to me. – Temani Afif Aug 03 '21 at 23:18
A way other than using mask. – Aug 03 '21 at 23:21
1

@csshtmljavascript14578 wait for more answers but don't re-ask the same question – Temani Afif Aug 03 '21 at 23:23
Would you know if I would be able to use border-image? https://developer.mozilla.org/en-US/docs/Web/CSS/border-image or will that not work here? – Aug 04 '21 at 00:20
Can the gradient and image be applied to the border, and not the background? Can that be done? That’s what I was trying to figure out how to do. – Aug 04 '21 at 00:31
Temani Afif, every body ask for a reason, he/she is stuck at some point and don't know what to do further. But every body also has the right to wait for a better answer. In my opinion I would not use a css mask to accomplish the ask because there are more efficient and less resource eater solutions. I think that when csshtmljavascript14578 talks about a better answer is referring to a more efficient, less coded more simple solution. – SIMBIOSIS surl Aug 04 '21 at 03:25
csshtmljavascript14578 if you use a svg file you will be able to apply the gradient to the border with a svg gradient. – SIMBIOSIS surl Aug 04 '21 at 03:26

SIMBIOSIS surl · Answer 2 · 2021-08-04T18:37:20.420

There are a couple of things that you can do.

Just remove the background image from .curtain and set it to transparent, then play around with the width and height and the border width.
Create a svg vector graphic consisting on the border of a rectangle and later open that svg on the text editor and remove any style from it and manage those values in the css file using @media screen to manage its with and height across screens to make it responsive. Place that svg as the bg of the curtain but its width and height to be managed with the @media screen.
Import the bg image in a vector graphic editor like Inkscape using the embed option and create a rectangle with the border color and border width of your choice, no fill, and export everything as a svg. Then use that svg as a bg for html or body.

Each of these approaches fit to a different purpose. For me, if the bg image will be changed dynamically, the first and second options fit better with that purpose. But if your bg will be static then the third would be the best option, always remembering the use of @media screen to make it responsive managing the with and height of the rectangle path.

If any of the above fit your needs, then reformulate your question in order to seek for a better/different approach.

I took a time and fixed it using the first approach I did mentioned above. Now it's responsive. Let's see if it fits your needs.

    html,
    body {
    height: 100%;
    padding: 0;
    margin: 0;
    }
    body {
    background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
    background-attachment: fixed;
    background-size: cover;
    }
    .outer {
    display: table;
    height: 100%;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    }
    .tcell {
    display: table-cell;
    vertical-align: middle;
    padding: 8px 8px;
    }
    .curtain {
    margin: auto;
    border: 15px solid rgba(169, 169, 169, 0.7);
    border-radius: 12px;
    background: transparent;
    background-origin: padding-box, border-box, border-box;
    background-clip: padding-box, border-box, border-box;
    }

    .curtain-ratio-keeper {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
    background: transparent;
    border: 2px solid rgba(70, 70, 70, 0.8);
}
    .curtain-out-ratio-keeper {
    position: relative;
    height: 50%;
    overflow: hidden;
    background: transparent;
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

    <!DOCTYPE html>
    <html class="with-statusbar-overlay" lang="es"><head><meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=5, user-scalable=yes, width=device-width">
    </head>
    <body>
    <div class="outer"><div class="tcell"><div class="curtain-out-ratio-keeper"><div class="curtain"><div class="curtain-ratio-keeper">
    </div></div></div></div></div>
    </body>
    </html>

Removing the middle of the background, keeping only the border

2 Answers2

Linked