Fixed gradient background with css

by

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

More Related Contents:

  1. Gradients in Internet Explorer 9
  2. Using percentage values with background-position on a linear-gradient
  3. How do I combine a background-image and CSS3 gradient on the same element?
  4. Use CSS3 transitions with gradient backgrounds
  5. How to remove the stripes that appears when using linear gradient property [duplicate]
  6. Stretch and scale a CSS image in the background – with CSS only
  7. CSS3 background image transition
  8. How to get div height to auto-adjust to background size?
  9. CSS3 Transparency + Gradient
  10. CSS3 gradient background set on body doesn’t stretch but instead repeats?
  11. Preloading CSS Images
  12. Gradient text color
  13. What is the difference between background and background-color
  14. draw diagonal lines in div background with CSS
  15. Error: CSS: background: / is an incorrect operator
  16. Can you add noise to a CSS3 gradient?
  17. Why does the linear-gradient disappear when I make an element position:absolute?
  18. SVG gradient using CSS
  19. Greyscale Background Css Images
  20. Using CSS, can you apply a gradient mask to fade to the background over text?
  21. Cross browser way to rotate image using CSS?
  22. CSS opacity and child elements
  23. CSS: background image on background color
  24. How can I prevent CSS gradient banding?
  25. div background color, to change onhover
  26. css text gradient
  27. Overlay a background-image with an rgba background-color
  28. CSS gradient checkerboard pattern
  29. background-attachment fixed with transform not working in Firefox
  30. Fade image to transparent like a gradient

Leave a Comment