Shimmer effect with DYNAMIC background position? - html

I have found that solution on this page. However, the background-position prop is... hardcoded (static). It will fail on different screen sizes (its too narrow for 4K screens - will start over in a half, and it's too wide for small screens - it will animate too quickly).
Is there a way to somehow make it dynamic, so it will work properly for every screen size? And if you ask, 100% do not work unfortunately.
#keyframes shimmerBackground {
0% {
background-position: -1000px 0
}
100% {
background-position: 1000px 0
}
}
.shimmer {
background-image: -moz-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0)), color-stop(60%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0)));
background-image: -webkit-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
background-image: -o-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
background-repeat: repeat-y;
animation: shimmerBackground 1s linear infinite;
width: 100%;
height: 100px;
background-color: blue;
}
<div class='shimmer' />


You could try the vw (viewport width) / vh (viewport height) / vmin (viewport shorter edge) / vmax (viewport longer edge) units.
#keyframes shimmerBackground {
0% {
background-position: -100vw 0;
}
100% {
background-position: 100vw 0;
}
}


As I understand
when changing screen size shimer div height is not changing according
here height is fixed height: 100px;
It can be dynamic like height:20% or something you like
If you want to change animation speed
animation: shimmerBackground 1s linear infinite;
You can change 1s to 3s or something you like

Related

grid layout as background, not using body tag

I want my background to be a grid. I found this:
html:
<div id="content"> </div>
css:
html{
height:100%;
}
body {
width:100%;
margin: 0;
padding: 0;
height: 100%;
background-color: #434343;
background-image:linear-gradient(#434343, #282828);
}
#content{
background-color: transparent;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
height:100%;
background-size:50px 50px;
}
though it only works when a body tag is used. I want to be able to change body to something like #contentbody, though this does not work (does not display a grid anymore).
I tried making the position of #content absolute and z-index to -1, and making the background color of divs on top of it transparent, but this did not work either. can anyone help me?
So I essentially have 2 questions, and either one can be answered (or both if youd like):
how can I have a grid background with a custom tag like #contentbody (and not body)
how can I overlay divs on top of a position:aboslute; z-index:-1 grid background and show that grid?
https://jsfiddle.net/7d805qut/
Thanks in advance for help

Simply consider multiple background like you are already doing:
html,body{
margin: 0;
padding: 0;
height:100%;
}
#content{
background:
linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%),
linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%),
linear-gradient(#434343, #282828);
height:100%;
background-size:50px 50px,50px 50px,auto;
}
<div id="content"> </div>

Fading top and bottom of div element

I've been able to fade the top of a div, but I can't get the bottom to fade as well. I figured I could just reverse the css I used to fade the top but it's not working.
HTML:
<div class="container-city">
<div id="gradient-top">
<h2 style="text-align: center; padding-top: 60px;">LOCATIONS</h2>
</div>
<div id="gradient-bottom">
</div>
</div>
CSS
.container-city {
background-image: url("img/1652.png");
width: 100%;
}
#gradient-top {
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}
#gradient-bottom {
background: -moz-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
background: -webkit-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
background: linear-gradient(to top, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}
Question:
Is there an easier way to accomplish this by fading the top and bottom?
Current Result:

Seems like the simplest solution would be to add a linear-gradient with multiple stops to the background-image and center the title vertically and horizontally to get the effect you are looking for (you can also add percentage values to the gradient color stops to tweak how it fades). Something like the following:
.container-background {
background-image: linear-gradient(#fff, transparent, #fff), url('http://via.placeholder.com/200x800/f0f000/fff?text=');
width: 100%;
}
.container-title {
text-align: center;
margin: 0 auto;
padding: 60px 0;
}
<div class="container-background">
<h2 class="container-title">TITLE</h2>
</div>

How can I type in a progress bar in bootstrap?

good to see you!
I have a question about bootstrap. So I basically have this progress bar on which I have managed to get to display the current progress in ml and per cent (it's for showing the daily intake of water current/all required). Now I want to display on the right side the amount of ml(per cent) left, as shown in the picture: 20% is done / 80% is left. I hope you get what I want, sorry for my English, I am not native.
This is my code so far:
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">800 ml (20%)
</div>
</div>

Try putting the text in two spans, one floated left, one floated right, and clearfix the containing progress bar.

Something like this?
.container {
width: 300px;
margin: 30px auto 0;
}
.progress {
position:relative;
overflow: hidden;
height: 18px;
margin-bottom: 18px;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.progress .bar {
width: 0%;
height: 18px;
color: #ffffff;
font-size: 12px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0e90d2;
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
background-image: -ms-linear-gradient(top, #149bdf, #0480be);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(top, #149bdf, #0480be);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: width 0.6s ease;
-moz-transition: width 0.6s ease;
-ms-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.progress-striped .bar {
background-color: #62c462;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
-o-background-size: 40px 40px;
background-size: 40px 40px;
}
.progress.active .bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-danger .bar {
background-color: #dd514c;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
}
.progress-danger.progress-striped .bar {
background-color: #ee5f5b;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-success .bar {
background-color: #5eb95e;
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -ms-linear-gradient(top, #62c462, #57a957);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(top, #62c462, #57a957);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
}
.progress-success.progress-striped .bar {
background-color: #62c462;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-info .bar {
background-color: #4bb1cf;
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
background-image: linear-gradient(top, #5bc0de, #339bb9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
}
.progress-info.progress-striped .bar {
background-color: #5bc0de;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.remainder{
float:right;
font-size: 12px;
color:blue;
}
<div class="container">
<div class="progress">
<div class="progress progress-info
progress-striped">
<span class='remainder'>80%</span>
<div class="bar"
style="width: 30%;">800 ml (20%)</div>
</div>
<div class="progress progress-danger
progress-striped active">
</div>

This one worked well:
Added new style to the css
.progress-bar1 {
font-size: 12px;
line-height: 20px;
color: #000;
text-align: center;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
Changed html to:
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100" style="width: 20%">800 ml (20%)
</div><p class="progress-bar1 text-center">140</p>
</div>
Result:

Background gradient top left and bottom right

I have this css applied to my DIV
div#envelope{
width: 400px;
margin: 140px 23% 10px 16%;
padding:33px 0 10px 0;
border-radius:2px;
background-color: rgba(255,255,255,0.5);
background-image: -webkit-gradient(
linear,
right bottom,
left top,
color-stop(0, rgba(255, 255, 255, 0.5)),
color-stop(0.50, rgba(255, 255, 255, 0.5))
);
background-image: -o-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -ms-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: linear-gradient(to left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
}
Question - I want to apply the gradient to top left and another gradient to bottom right, what is the correct syntax to achieve this?

You want to apply a gradient towards the top-left and another towards the bottom right. You can however do this with a single gradient using 3 colors. The 0% value will be in the right bottom, the 100% value in the left top, the 50% value will be between them. Feel free to play around with the JSFiddle. Hope this answers your question.
background:
linear-gradient(to left top, rgba(0, 255, 255, 1) 0%/*bottom-right color*/, rgba(255, 0, 255, 0.5) 50% /*middle color*/, rgba(255, 255, 0, 1) 100% /*top-left color*/),
linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1))/*"faked" black background make sure to add last or it will appear before the transparent/colored layer*/;
PS: I did only use the "regular" gradient and not all cross-browser ones (you seem to be perfectly capable of that yourself).
PSII: You can always add more colors to the gradient.

CSS Optimization issue

I've found a css striped and tiled combination that I really like. The problem is, it makes everything really, really slow. I'm wondering, are there any techniques I should use to make this css more optimized? Or is the technique just too demanding in itself?
I use less.
.head {
.stripes;
.angled;
}
.stripes {
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px; /* Controls the size of the stripes */
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
}
.angled {
background-color: #light-blue;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}

Few weeks ago I tested this technique on Firefox, Opera and Chrome with a simple two color gradient to get vertical stripes.
It works quite well for large background-size but when you set it to just few pixels browser needs a lot more time to render it especially when you maximize the window.
Opera and Chrome handle it quite well. Sometimes you can see a spike on the cpu usage graph but it's not that bad. Firefox on the other hand goes crazy on the cpu.
It's most probably problem with the way gradients and background-size are implemented. I think it's better to use images at least for now.
You may want to use base64 and put it into your css to avoid another request.