How to use css3 background patterns?

[juliankim]

http://lea.verou.me/css3patterns/#cicada-stripes I thought this pattern was pretty sick so I put the code in ExtraCSS

This is what I put .hero { background-color: #026873; background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%); background-size: 13px, 29px, 37px, 53px; }

Didn't work, [background-color] seem to work but nothing else. So as other css patterns.

[jshimko]

This isn't really an issue with the plugin. You likely need some vendor prefixes.

At the very least...

.hero {
  background-color: #026873;
  background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,.07) 50%, transparent 50%), 
                    -webkit-linear-gradient(0deg, rgba(255,255,255,.13) 50%, transparent 50%), 
                    -webkit-linear-gradient(0deg, transparent 50%, rgba(255,255,255,.17) 50%), 
                    -webkit-linear-gradient(0deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
                    linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
                    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
                    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-size: 13px, 29px, 37px, 53px;
}

[juliankim]

Still isn't working :(... I'll figure it out

[jshimko]

.hero .hero-inner {
  background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,.07) 50%, transparent 50%), 
                    -webkit-linear-gradient(0deg, rgba(255,255,255,.13) 50%, transparent 50%), 
                    -webkit-linear-gradient(0deg, transparent 50%, rgba(255,255,255,.17) 50%), 
                    -webkit-linear-gradient(0deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.0666667) 50%, transparent 50%), 
                    linear-gradient(90deg, rgba(255, 255, 255, 0.129412) 50%, transparent 50%), 
                    linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.168627) 50%), 
                    linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.188235) 50%);
  background-color: rgb(2, 104, 115);
  background-size: 13px, 29px, 37px, 53px;
}

[jshimko]

(code above works for me)

[juliankim]

WOW! WORKS PERFECTLY!! Thank you so much for your time :+1:

[jshimko]

You're welcome. :)

[jshimko]

It actually might be pretty cool to build a few of those into the plugin as optional backgrounds for people that don't want to bother with images. I'll have to put that on my ever-growing todo list. :)

[juliankim]

GREAT!!! I absolutely agree. I think it's also great for performance-wise too.