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


im building app using ionic2 , need add background (light blue lines) app background: background image , don't want import image (using html5 canvas &/or css3).

anyone can me it?

here css:

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

thank you!

you don't need canvas or background image. can achieve css gradients:

#background {     width: 300px;    height: 400px;        background-image:                /* 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 few different ways achieve this, in example there's 1 div full-size blue gradient in background, , 2 overlaying, smaller white gradients creating lines. can add more lines, change color etc. effect you're looking for.

you combine linear-gradient statements keep file size smaller, they're separately here improved readability.


Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -

java - Digest auth with Spring Security using javaconfig -