CODEWITHSUNDEEP
htmlcss
FromTheAshes
FromTheAshes

Reputation: 151

Where is this border coming from on my empty div? (even in isolated environment)

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; 
}

blob with mystery border

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 class="blob1"></div>

Upvotes: 1

Views: 81

Answers (2)

George Chond
George Chond

Reputation: 997

  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 class="blob1"></div>
<div class="spacer"></div>
<div class="get-over-blob"></div>

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

Upvotes: 0

Maik Lowrey
Maik Lowrey

Reputation: 17586

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

Upvotes: 1

Related Questions