CSS3 Background with Gradient Overlay - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

CSS3 Background with Gradient Overlay

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

html {<!--from w  ww .j  a v a 2  s .c  om-->
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(99, 130, 169, 0.7))), url('https://www.java2s.com/style/demo/Opera.png'); /* Chrome,Safari4+ */
   background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,0.16)), url('https://www.java2s.com/style/demo/Safari.png'); /* Chrome10+,Safari5.1+ */
   background-image:    -moz-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('https://www.java2s.com/style/demo/Google-Chrome.png'); /* FF3.6+ */
   background-image:     -ms-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('https://www.java2s.com/style/demo/Google-Chrome.png'); /* IE10+ */
   background-image:      -o-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('https://www.java2s.com/style/demo/Google-Chrome.png'); /* Opera 11.10+ */
   background-image:         linear-gradient(to bottom, transparent, rgba(99,130,169,0.7)), url('https://www.java2s.com/style/demo/Opera.png'); /* W3C */
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-attachment: fixed;
   min-height: 100%;
}


      </style> 
 </head> 
 <body>  
 </body>
</html>

Related Tutorials