Adding objects to the background

PaulOB · December 6, 2021, 8:13pm

I think the only way would be to use a mask-image.

e.g.Remove the background from the curtain and apply it to an absolutely placed pseudo element like this.

.curtain {
  position: relative;
  flex: 1 0 0;
  margin: auto;
  max-width: 642px;
  /*box-shadow: inset 0 -2px 0px 0px #0a0a0a;*/
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;

}
.curtain:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:
    repeating-conic-gradient(blue, black 0.00306deg);
  -webkit-mask-image: radial-gradient(135px at 50% 50%, transparent 95%, #000 100%);
  mask-image: radial-gradient(135px at 50% 50%, transparent 95%, #000 100%);
}

The only other way would be to repeat the body image as a fixed background on another inner element to cover out the fuzzy background but that would require the body background to be attachment-fixed also and then you’d have to duplicate all the different backgrounds,

asasass · December 6, 2021, 11:49pm

I think the px in there needs to be a percent. https://jsfiddle.net/9gow2exr/

or maybe it is a different issue.

  background:
    repeating-conic-gradient(blue, black 0.00306deg);
  -webkit-mask-image: radial-gradient(135px at 50% 50%, transparent 95%, #000 100%);
  mask-image: radial-gradient(135px at 50% 50%, transparent 95%, #000 100%);
}

PaulOB · December 7, 2021, 12:35pm

Yes I think you need something like this.


.curtain:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:
    repeating-conic-gradient(blue, black 0.00306deg);
  -webkit-mask-image: radial-gradient(ellipse 21% 36% at 50% 50%, transparent 95%, #000 100%);
   mask-image: radial-gradient(ellipse 21% 36% at 50% 50%, transparent 95%, #000 100%);

}

Play around with the values of the ellipse. Here it is at small window size.

Screen Shot 2021-12-07 at 12.34.21

It probably should work with circle instead of ellipse but I couldn’t get it to show.

asasass · December 7, 2021, 12:38pm

Like this? https://jsfiddle.net/vaoswrye/

.curtain:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: repeating-conic-gradient(blue, black 0.00306deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0% 32%, black 32%);
  mask-image: radial-gradient(circle, transparent 0% 122px, black 122px);
}

PaulOB · December 7, 2021, 12:44pm

Yes that looks like it except you need to change the non prefix version to match as you still have px in there.


  mask-image: radial-gradient(circle, transparent 0% 32%, black 32%);

asasass · December 7, 2021, 12:51pm

It was originally 35% without mask

background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);

I put it back to that. https://jsfiddle.net/9o4w5d1x/

.curtain:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: repeating-conic-gradient(blue, black 0.00306deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0% 35%, black 35%);
  mask-image: radial-gradient(circle, transparent 0% 35%, black 35%);
}

asasass · December 7, 2021, 2:33pm

Is there a reason why the background is showing through the black background?

https://jsitor.com/pEKIDh-mc

Small Desktop (1280 x 1024)
Medium Desktop (1920 x 1080)
Big Desktop (2560 x 1440)

Is there a way to fix that?

asasass · December 7, 2021, 4:09pm

If I replace: background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);

With: background: #0a0a0a;

That issue is not there.

Is there a fix for that?

PaulOB · December 7, 2021, 5:28pm

If you are talking about the 1px line that is about 20px from the edge then I can’t see what is causing it. It seems to be an artefact on the radial gradient combined with the border on the ratio-keeper but I’m not 100% sure.

It looks like you could cover it up like this.

.ratio-keeper{border:none;}
.curtain{position:relative;}
.curtain:before{
content:"";
position:absolute;
left:-2px;
right:-2px;
top:-2px;
bottom:-2px;
border:5px solid #0a0a0a;
pointer-events:none;
}

There’s probably a better solution and a reason but I just can’t see it at the moment.

asasass · December 8, 2021, 5:40am

I was told: “it looks like due to a rounding error”

And was told to add this:

.ratio-keeper {
   border: 2px solid #333;  
   box-shadow: 0 0 3px 5px black;
   }

But now it is able to be seen through the box shadow.
https://jsitor.com/Trd4Hlbrk2

Wouldn’t a rounding error be fixed with calc();?

Seen Here:

asasass · December 8, 2021, 7:33am

Something like this? https://jsitor.com/7OrtsoVI1

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 642px;
  /*box-shadow: inset 0 -2px 0px 0px #0a0a0a;*/
  border: 20px solid black;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);
  position:relative;
}
.curtain::before{
  content:'';
  position: absolute;
  top:-2px;
  left:-2px;
  height: calc(100% - 6px);
  width:calc(100% - 6px);
  border: 5px solid #333;
}

PaulOB · December 8, 2021, 8:34am

They were wrong. I gave you a working solution.

Here’s another one with as I suggested that the radial gradient goes on the pseudo element instead.

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 642px;
  /*box-shadow: inset 0 -2px 0px 0px #0a0a0a;*/
  border: 20px solid black;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position:relative;
}
.curtain::before{
  content:'';
  position: absolute;
  top:-2px;
  left:-2px;
  right:-2px;
  bottom:-2px;
  background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);
}

PaulOB · December 8, 2021, 1:21pm

I’ve had another look and copied the original transparent code into codepen and there is no transparent line at any viewport size. It looks like its a bug in the jsitor editor itself when you have it set to ipad mode.

If you change it to 100% normal size then there is no gap in Jsitor either. Therefore this is not an issue except in the sandbox environment and their interpretation of different resolutions.

asasass · December 8, 2021, 1:32pm

I’m going to test it on git hub and see if I see anything.

Just tested, you seem to be right.

Is using JSitor to test different resolutions bad, or good in some circumstances?

It was used to fix different issues.

Does zooming in and out of a browser test different resolution displays?

PaulOB · December 8, 2021, 2:07pm

No not really.

The easiest way is just to open and close the browser window to the device size. Anything more involved requires testing on the actual device but apart from bugs and device peculiarities just opening and closing the desktop screen is a good indication…

asasass · December 9, 2021, 3:13pm

That code fixes the JSitor bug.

Should I be using that instead of this?

.curtain {
  position: relative;
  max-width: 642px;
  margin: auto;
  flex: 1 0 0%;
  /*box-shadow: inset 0 -2px 0px 0px #0a0a0a;*/
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);
}

Is there an extra added benefit of doing this? https://jsfiddle.net/zcyegr87/

.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 642px;
  /*box-shadow: inset 0 -2px 0px 0px #0a0a0a;*/
  border: 20px solid black;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
  position:relative;
}
.curtain::before{
  content:'';
  position: absolute;
  top:-2px;
  left:-2px;
  right:-2px;
  bottom:-2px;
  background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);
}

PaulOB · December 9, 2021, 4:03pm

The benefit I see is that the :before element will not be holding any content and therefore less likely to interfere or react with other elements in that context (and still also works in jsitor which you are using).

However if your tests show it working ok outside of jsitor then I guess its ok and less code.

asasass · December 14, 2021, 1:55pm

The middle open part is 640 x 361

How do I get 361 to be 360? https://jsfiddle.net/83auvsrt/

aspect ratio should be 360 if width is 640.

How would I be able to add border: 1px solid #333;

Without it interfering?

Maybe it shouldn’t be on ratio-keeper.

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  border: 1px solid #333;
}

asasass · December 14, 2021, 3:28pm

This did not work. https://jsfiddle.net/vxd2haco/1/

640 x 359

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: radial-gradient(circle, transparent 0% 35%, #0a0a0a 35%);
}

.curtain::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid red;
}

Using: https://jsfiddle.net/eqc02z4h/

640 x 361

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  border: 1px solid red;
}

PaulOB · December 14, 2021, 5:36pm

The problem is that you stuck a border on the ratio keeper and that destroyed the aspect ratio method. You are not supposed to do anything else to that ratio keeper or it won’t have a ratio as expected.

Remove the border from the ratio keeper (although you could use outline:1px solid #333 instead) and then set the curtain to max-width:640px and then the aspect will be correct.