Fixed Gradient Background with CSS

Fixed gradient background with css

If you wish to do this using CSS3 gradients, try using the background-attachment property

For example, if you are applying your gradients to #background, then add this after the CSS gradient.

background-attachment: fixed;

Note: You must add background-attachment after the background properties.

Your entire code might look like this:

#background {
  background: #1e5799;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
  background: -webkit-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:    -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:     -ms-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:      -o-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background:         linear-gradient(to bottom, #1e5799 0%, #7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
  background-attachment: fixed;
}

fixed background gradient with dynamic width

I've taken your snippet and replaced your % values on the gradient with an absolute pixel value. I've also inverted the gradient so it goes from left to right, from red to the other color. You can check that if you modify the width of the bar, the red still remains visible.

background: linear-gradient(to right, red, #C7D9F8 30px);

Full snippet below:

function changeWidth(){    $("#hp").css("width","10%");}
function reset(){  $("#hp").css("width","30%");}

#cont {width:170px; height:170px; background:#000; position:relative}#hp { position: absolute; bottom: 5%; width: 30%; height: 10px; background: linear-gradient(to right, red, #C7D9F8 30px); left: 5%; transition: all 1s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><div id="cont">  <div id="hp"></div></div>
<button onclick="changeWidth()"> Run</button><button onclick="reset()"> Reset</button>

How can I use 'linear-gradient' for fixed background image with CSS

Why not use a pseudo element on the .photo div to hold the gradient. This can be positioned absolutely over the top of the image.

.photo {
  background-image: url(https://s30.postimg.org/v67rh5bdd/image.jpg);
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 55vh;
  position: absolute;
}

.photo::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  background: 
    linear-gradient(
      to bottom, 
      rgba(255,255,255,0) 80%, 
      rgba(255,255,255,0.1) 82%, 
      rgba(255,255,255,0.2) 84%, 
      rgba(255,255,255,0.3) 86%,
      rgba(255,255,255,0.4) 88%, 
      rgba(255,255,255,0.5) 90%, 
      rgba(255,255,255,0.6) 92%,
      rgba(255,255,255,0.7) 94%, 
      rgba(255,255,255,0.8) 96%, 
      rgba(255,255,255,0.9) 98%,
      rgba(255,255,255,1) 100%
    );
}

See this bin:

http://jsbin.com/tepalahipe/edit?css,output

How to create a gradient progress bar with a fixed gradient

A solution using mask that will work with dynamic width:

.progress-bar-container {
  height: 50px;
  margin: 50px 0px;
  background: black;
  position:relative; /* relative here */
}

.progress-bar-indicator {
  height: 100%;
  border-radius: 25px;
   /* this will do the magic */
  -webkit-mask:linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0);
}
.progress-bar-indicator::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: linear-gradient(to right, red, green, blue); /* your gradient here */
}

<div class="progress-bar-container">
  <div class="progress-bar-indicator" style="width:80%"></div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-indicator" style="width:50%"></div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-indicator" style="width:30%"></div>
</div>

filter: gradient and background: fixed

It looks like all you're missing is to set a height on the body. Adding this style works for me in IE 8:

html, body {height: 100%}

So, using your style from your fiddle, it would look like this:

html, body {height: 100%}
body {
    background-attachment: fixed !important;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
}

And this is what the cross-browser version would look like:

html, body {height: 100%}
body {
    background-attachment: fixed !important;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
    background-image: -moz-linear-gradient(center top -90deg, #000000, #ffffff);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ffffff));
}

Obviously, you could put the IE specific code elsewhere and load it conditionally, etc.

This tested fine in IE 8, Firefox 3.6, Chrome 9 & Safari 5 (Webkit) but does not work in Opera. For Opera, SVG or actual background image?

Fixed Gradient Background with CSS