dtech February 2016

Use site background for CSS fixed element

I have a fixed div "hovering" above the rest of my site through position: fixed. However, this is ugly when other site-elements (i.e. text) appear behind the hovering element. I would like to hide elements when they are behind the hovering element, meaning to only show the site background behind it.

Because the site background in a gradient, I can't simply give the floating element it's own background. Is there a way to do this?

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
}
<div id="fixed">
Some Text
</div>

<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>

edit: To clarify: I want the background of the fixed element to the same as the site background where the fixed element is currently over. I don't want to put the fixed element above all other content.

Answers


Patrick Knudsen February 2016

Try this! :)

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%);
}
#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
  width: 100% ;
height: 100%;
  display: block;
}
<div id="fixed">
  Some Text
</div>
<div id="text">
  <script>
    for (i = 0; i < 50; i++) {
      document.write("Text text text text<br />")
    }
  </script>
</div>


Thanasis Adamou February 2016

You can insert a "background-color" in #fixed in css.


sTx February 2016

The only way I can see doing this is to set a scroll frame for text and leave the fixed element(which do not need to be fixed anymore) on top of the page

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
  overflow: hidden;
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
}

#text{
    margin-top: 80px;
    height: 400px;
    overflow: auto;
    width: 400px;
}
<div id="fixed">
Some Text
</div>
<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>


robjez February 2016

On top of what @sTx came up with, you could also hide this awkward scrollbars in webkit, by:

::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar {
display: none;
}

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
  overflow: hidden;
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
}

#text{
    margin-top: 80px;
    height: 400px;
    overflow: auto;
    width: 400px;
}
<div id="fixed">
Some Text
</div>
<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>


Krish February 2016

I hope this is the only way to achieve this.

body {
  width: 200px;
  font-family: sans-serif;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
}
#text{
  padding-top: 87px;
}
#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  z-index: 5;
  background-color: #b4ddb4;
  width: 100%;
  height: 37px;
}
<div id="fixed">
Some Text
</div>
<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>


robjez February 2016

One other route to explore, might be creating an extra "overlay" fixed element, pinned to all 4 corners of viewport, and giving it you gradient background, along with an opacity:

body {
  width: 200px;
  font-family: sans-serif;
  background: #fff;
}

#fixed {
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  font-size: 200%;
  background: #fff;
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
  opacity: 0.5;
}
<div id="fixed">
Some Text
</div>

<div id="text">
  <script>
  for(i=0;i<50;i++) {
    document.write("Text text text text<br />")  
  }
  </script>
</div>
<div class="bg"></div>

Post Status

Asked in February 2016
Viewed 2,833 times
Voted 8
Answered 6 times

Search




Leave an answer