Css bg

In this example below you will see how to do a Css bg with some HTML / CSS and Javascript

I found an old image (by adam dachis) on http://simpledesktops.com/ and turned it into pure css

Thumbnail
This awesome code was written by Thomasvd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Thomasvd ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Css bg</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      *{
                margin: 0 auto;
                padding: 0;
            }
            #bg{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 0;
                background: linear-gradient(-55deg, 
                                                    #ffeeb0 30%,   
                                                    
                                                    #a2d49f 30%, 
                                                    #a2d49f 40%, 
                                                    
                                                    #c7c12f 40%,  
                                                    #c7c12f 50%,    
                                                    
                                                    #f26247 50%,    
                                                    #f26247 60%,   
                                                    
                                                    #ec2045 60%,    
                                                    #ec2045 70%,   
                                                    
                                                    #ffeeb0 70%    
                                                    );
                
            }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div id="bg"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Thomasvd/css-bg-dLysA */
*{
                margin: 0 auto;
                padding: 0;
            }
            #bg{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 0;
                background: linear-gradient(-55deg, 
                                                    #ffeeb0 30%,   
                                                    
                                                    #a2d49f 30%, 
                                                    #a2d49f 40%, 
                                                    
                                                    #c7c12f 40%,  
                                                    #c7c12f 50%,    
                                                    
                                                    #f26247 50%,    
                                                    #f26247 60%,   
                                                    
                                                    #ec2045 60%,    
                                                    #ec2045 70%,   
                                                    
                                                    #ffeeb0 70%    
                                                    );
                
            }

/*Downloaded from https://www.codeseek.co/Thomasvd/css-bg-dLysA */
/*
	Original image by Adam Dachis.
	Turned into css by me (Mads Cordes)
*/

Comments