[gokhan]

Nice, but oh my poor Firefox. What's wrong with images as bg?

Some numbers:

The one with hearts is 944 bytes (css file), 232 bytes gzipped (with 7zip), 304 bytes as gif (Photoshop. Can be smaller with hand optimizations. Need extra css code to tile as bg)

Just a tech demo IMO.

[jstalin]

This site completely borked by firefox. Had to close and restart my browser to get out of it.

[derefr]

> What's wrong with images as bg?

1. Give a content block a raster background with a pattern including lots of pixel-perfect high-contrast edges (precisely the thing there are lots of in these demos!)

2. Visit the page on a mobile device, and tap to fit.

3. Horrible antialiasing ensues. (Not to mention what happens when you zoom in further.)

"CSS (vector) backgrounds" do have their use, and it's pretty much the same use as "vector icons"/"icon fonts" have: making things that look good at arbitrary scale+DPI.

[gngeal]

"The one with hearts is 944 bytes (css file), 232 bytes gzipped (with 7zip)"

Did you measure the compressed size on its own or as a delta inside a larger CSS file? The pattern is going to share at least a part of its dictionary with the rest of the CSS file if sent deflated.