Eran Levi Eran Levi - 1 year ago 65
CSS Question

How can I draw this background without a real BG image (using canvas/css3?)

Im building an app using Ionic2 and I need to add this background (light blue with lines) to my app background:
background image
and I don't want to import an image for that (using html5 canvas &/or CSS3).

anyone can help me with it?

Here is my css:

width: 100%;
height: auto;
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #01c4cd;

Thank you!

Answer Source

You don't need a canvas or a background image. You can achieve this with css gradients:

#background { 
  width: 300px;
  height: 400px;
    /* Line 1 */
    linear-gradient(45deg, rgba(255,255,255,0) 63%,rgba(255,255,255,0.1) 64%,rgba(255,255,255,0) 65%),
    /* Line 2 */
    linear-gradient(45deg, rgba(255,255,255,0) 78%,rgba(255,255,255,0.1) 79%,rgba(255,255,255,0) 80%),
    /* Blue background gradient */
    linear-gradient(45deg, #1f579b 0%,#7bdce5 100%);   
<div id="background"></div>

There's a few different ways to achieve this, but in this example there's one div with a full-size blue gradient in the background, and two overlaying, smaller white gradients creating the lines. You can add more lines, change their color etc. to get the effect you're looking for.

You could combine the linear-gradient statements to keep file size smaller, but they're separately here for improved readability.