Home/ Questions/Q 683015
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T01:39:37+00:00

How to create such (see image below) effect using pure HTML JS and CSS?

  • 0

How to create such (see image below) effect using pure HTML JS and CSS?

alt text
(source: narod.ru)

For a site backgrownd (And I hoe that because of JS CSS and HTML it’ll be able to change colors)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0