Removing the middle of the background, keeping only the border

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.

https://jsfiddle.net/racsob9v/

It looks like this now.

I’m trying to do this.

Do you know which element is adding the black background? If so, I’d start with that by removing the background.

1 Like

Will you be able to walk me though how to do this because I can’t figure out how this is done.

Here?
background: linear-gradient(to bottom right, gray, black), url("https://i.imgur.com/pwdit9N.png"), linear-gradient(to bottom right, #eee, #ccc);

Removing the black makes the border disapear.
https://jsfiddle.net/bdosuh7y/

The border is supposed to stay.

Also, the gradient and image should only be applied to the border, and not the background.

This is much harder than I thought it would be.

Is it not possible to do?

I’m guessing you might find the CSS border-image property somewhat interesting?

I tried using that and don’t know how it would work with the code.

Were you able to get it to work with it?

I didn’t try. I’m not the one who wants to do it :slight_smile: I’m just throwing out suggestions. border-image seems like it might be able to do what you want (if I understand correctly). Or you could just a solid border?

1 Like

Can you try to see if you were able to?

If you were able to get it to work, then that is the way to do it, if not, then it can’t work using that.

First I eliminated the background properties from the curtain class. That eliminated the gradient but the border looked too thin. I then changed transparent to white in the border property and got the thickness back.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.