Search code examples
cssgradientbackground-colorfixed

How to fix a background-color?

My question, can seem very dumb. But it's not, even I think so.

I've got a gradient on my background-color to make an effect on the background-image which is under it with position fixed.

body{
  background-image:url(...);
  background-attachment: fixed;
}

body:after{
  content: "";
  display: block;
  background-attachment: fixed;
  position: absolute;
  height: 100%;
  width: 100%;
  background: -moz-linear-gradient(-45deg, rgba(30,87,153,1) 0%, rgba(89,148,202,1) 62%,     rgba(95,154,207,0.7) 68%, rgba(125,185,232,0) 100%);
}`

I hope, I've been precise enough. If you need more information, don't hesitate.

Thank you !

Solution

  • If this is what you want:

    • a fixed background image on the body
    • and a fixed background on top of that, obscuring most of the background image

    you'll need to add 

    top:0; left:0;
z-index:-1;

    to the body::after, and change its position:absolute to position:fixed.
    The z-index is necessary, because otherwise the ::after would be on top of the content of the body itself.

    See jsfiddle.