How to create such (see image below) effect using pure HTML JS and CSS?
For a site backgrownd (And I hoe that because of JS CSS and HTML it'll be able to change colors)
A:
I think this may require an image (which could be set through CSS to the background of whatever container you wish to put this in), but I don't think you'll be able to do this with pure scripting.
Paddy
2010-03-15 16:54:07
I'd say for easiest way you could script it to bump each horiz repeat of the image up by a few pixels and have it as a 1px thick. that way it would look seamless. Depends what your going for I guess.
Thqr
2010-03-16 02:25:02
A:
Technically speaking you can change your background-image using CSS. Getting it to tile properly left to right means creating the image at a width which makes the borders between horizontally repeated (background-repeat: repeat-x) images seamless, so that it will look like each diagonal line picks up on the left side where diagonal on the image to the right leaves off.
Robusto
2010-03-15 16:58:47
+1
A:
Well, this can be done with CSS Gradients.
But, i am not sure if that is supported in all browsers.
For cross-browser support, use this library.
N 1.1
2010-03-15 16:59:31
@nvl - Sometimes people prefer that OP do it 'their way' whether or not it's the answer to the question they asked. I'm guilty of that myself every now and then, but I *try to refrain from forcing my answer on anyone unless it answers the question at least. Otherwise, I think it's best to either post no answer, or assert that one "cannot" do what is being asked and why :pBack on topic, I'm guessing OP would still need an image to accomplish the diagonal stripes, but even if they did, it could be static. That's why your solution answers the question IMO.
George Sisco
2010-03-15 20:29:51
A:
You need a different approach.
Check out this url: http://www.eyecon.ro/colorpicker/.
As you can see when you move slider up and down it changes the background of the picker div.
But if you inspected this DIV with Firebug, you would see it is always using this image: http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png
..because parent div is using the actual colour:
<div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div>
Try to replace this background value in firebug, set it to green for instance - you will see gradient is still there, but this time gradient is green.
And that's our trick. Create semi-transparent PNG image to use as a background, with the pattern you showed above. Put it on top of the solid-colour background, and when you change background colour it will look like you replaced background image.
So in the theoretical code:
body { background:red; margin:0; padding:0; /* make sure overlay can stretch 100% in all directions*/ }
#background-overlay { background:url(path/to/image.png); }
<body>
<div id="background-overlay">
..content goes here
</div>
</body>
The downside of this approach is that IE6 doesn't support transparency for PNG files. You could either use some sort of png transparency fix or ignore this effect completely for IE6 users. (as we don't care about their feelings anyway, right? ;-))
Still in my humble opinion this is the most proper way to achieve the effect you want, knowing you would want to change background colours later.
rochal
2010-03-16 14:23:01