How to set html element padding color same as body color

I’ve a fixed element at the bottom of the page that stays on top of every other element. It’s about 33% of the page’s width. As I scroll the page, other elements keep on going behind this element.

What I want is a little bit of distance between the top of this element and where the other elements start to hide. This is easily possible. But my requirement is to have this gap to be colored same as that of the body at that vertical position.

Is it possible preferably without using JavaScript?

The white area in this fiddle is what I want to have of the same color as that of the body (at that vertical position): https://jsfiddle.net/f5qnv8bL/1/

Check this image

body {
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
  height: 2000px;
}

<div style="background-color:green; float:right; height:750px;">
Something here
</div>

<div style="background-color:white; height: 120px; position:fixed; bottom:0; right:0; width: 400px;">
  <div style="background-color:red; height: 100px; position:fixed; bottom:0; right:0; width: 400px;">
  </div>
</div>

Answer

Is this what you mean?

Html:

<div style="background-color:green; float:right; height:750px;">
Something here
</div>

<div id="whatever" style="background-color:white; height: 120px; position:fixed; bottom:0; right:0; width: 400px;">
  <div style="background-color:red; height: 100px; position:fixed; bottom:0; right:0; width: 400px;">
  </div>
</div>

CSS:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
  height: 2000px;
}

#whatever {
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
}

Advertisement

Answer