Because #lovewins: here’s a simple #CSS3 trick for a #pride #rainbow website background: Add this style element right before your closing </head> tag: <style> /* CSS Pride rainbow bg by Tantek Çelik. CC0: share freely. */ body { background: linear-gradient(180deg, #f00000, #f00000 16.67%, #ff8000 16.67%, #ff8000 33.33%, #ffff00 33.33%, #ffff00 50%, #007940 50%, #007940 66.67%, #4040ff 66.67%, #4040ff 83.33%, #a000c0 83.33%, #a000c0) fixed; } </style> Or copy paste the body {...} rule into your main CSS file. https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/11420738_425867917615828_488783301_n.jpg https://instagram.com/p/4cnmPhA9Qk/ Try it out and let me know how it works with your site, theme, blog, framework etc. References: * colors from https://commons.wikimedia.org/wiki/File:Gay_flag.svg * CSS3 linear-gradient documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient Update 2015-06-30: After some searching I found some similar prior art from Greg Doolittle in 2011! * http://gregdoolittle.com/blog/2011/12/15/css3-rainbow-flag/ With a few differences: * colors are similar, but not same as the Wikipedia reference * 18% instead of 16.67% (and other integer vs decimal %s) * has -o- -moz- -webkit- -ms- prefixed versions as well as the old -webkit-gradient syntax Also apparently there’s a bug in *both* Mobile Webkit and Mobile Chrome, likely with the combination of a linear-gradient background-image and background-attachment:fixed. Both stretch the gradient to the entire canvas of the document, instead of the viewport like they're supposed to. Works fine when you resize desktop Safari or Chrome windows to the size of an equivalent mobile screen, so it’s only their mobile variants that appear to be buggy. Also works fine in desktop Firefox, Android Firefox, and FirefoxOS.

Because #lovewins: here’s a simple #CSS3 trick for a #pride #rainbow website background:

Add this style element right before your closing </head> tag:

<style> /* CSS Pride rainbow bg by Tantek Çelik. CC0: share freely. */
body { background: linear-gradient(180deg, #f00000, #f00000 16.67%, #ff8000 16.67%, #ff8000 33.33%, #ffff00 33.33%, #ffff00 50%, #007940 50%, #007940 66.67%, #4040ff 66.67%, #4040ff 83.33%, #a000c0 83.33%, #a000c0) fixed; }
</style>

Or copy paste the body {...} rule into your main CSS file.

Try it out and let me know how it works with your site, theme, blog, framework etc.

References:
* colors from

* CSS3 linear-gradient documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Update 2015-06-30:
After some searching I found some similar prior art from Greg Doolittle in 2011!
* http://gregdoolittle.com/blog/2011/12/15/css3-rainbow-flag/
With a few differences:
* colors are similar, but not same as the Wikipedia reference
* 18% instead of 16.67% (and other integer vs decimal %s)
* has -o- -moz- -webkit- -ms- prefixed versions as well as the old -webkit-gradient syntax

Also apparently there’s a bug in *both* Mobile Webkit and Mobile Chrome, likely with the combination of a linear-gradient background-image and background-attachment:fixed.

Both stretch the gradient to the entire canvas of the document, instead of the viewport like they're supposed to. Works fine when you resize desktop Safari or Chrome windows to the size of an equivalent mobile screen, so it’s only their mobile variants that appear to be buggy. Also works fine in desktop Firefox, Android Firefox, and FirefoxOS.