I am attempting to make a coloured "blob" with a parallax scroll in the background. This is my current CSS, and the blob (an empty with class name "blob"), remains fixed as you scroll down the page:

.blob1 {
    background: #FFFAD1;
    border-radius:40%;
    transform: rotate(-130deg);
    width:40%;
    top:10%;
    right: -20%;
    position: fixed;
    height: 20em;
    overflow: scroll; 
}

I have no idea where that little box/border at the end is coming from though. Has anyone seen something like this before?

Bonus round: I have got the scrolling with the page (position: fixed), but what I really want is for it to slowly move upwards as I scroll down. How might I achieve something like that?

Code

.blob1 {
  background: #FFFAD1;
  border-radius: 40%;
  transform: rotate(-130deg);
  width: 40%;
  top: 40%;
  right: -20%;
  position: fixed;
  height: 20em;
  overflow: scroll;
}

<div ></div>

CodePudding user response：

If you change overflow: scroll; to overflow: auto; or : hidden or remove it completly. then the border will disappear.

CodePudding user response：

1. To get rid of the scrollbars, you need to hide the overflow with overflow: hidden;.
   
2. When you use position:fixed; the element stays fixed without consuming space.
   So I added 2 other divs. The first is bringing some space between the two, the second is a background that gets over blob1. To do that, you need to play with z-index. You need to position:relative; the other div and since blob has the default z-index you can assign at the background div a z-index: 1;.
   

.blob1 {
  background: #FFFAD1;
  border-radius: 40%;
  transform: rotate(-130deg);
  width: 20%;
  top: 20%;
  right: 50%;
  position: fixed;
  height: 10em;
  overflow: hidden;
}

.spacer {
  min-height: 300px;
}

.get-over-blob {
  min-height: 600px;
  background: darkorange;
  position: relative;
  z-index: 1;
}

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

I formatted blob1 values for a better representation, be sure to change them back to yours.