Check out the background CSS trick on this blog's posts | Hacker News Reader

Check out the background CSS trick on this blog's posts

jarredbishop.tumblr.com

77 pointsAndrewWarner27 comments

He's using the background-attachment property:

http://www.w3schools.com/Css/pr_background-attachment.asp

Using it in a div like that is a fairly spiffy effect.

My personal opinion is that I don't like it. I just dislike having things move when I don't expect them to -unless they are amusing me. But in this blog post, imho, it is subtracting from everything else rather than adding a pleasing design effect.

This amuses me.

I first saw this done on the CSS Zen Garden a number of years back. Its still live here: http://www.csszengarden.com/?cssfile=http://www.timpelen.com...

Up voted for creative design, and pics of the dentist-kid in the car freaking out in the last div.

Anyone seen practical application of this, or is it mostly for funzies?

I felt similarly. While a neat effect, I really don't see the practical use of it at current. Maybe there are some sites that will use it to good effect soon?

Design-wise it really detracts from the rest of the blog page.

I've seen it used for an effect where it looks like you are raising and lowering a flag on a pole as you scroll up and down.

Would you happen to have the URL for that?

Sorry no, it was an eBay auction of all things. But I don't remember what for.

When you scrolled the ebay page it had that affect, but it was not in the entire page, just in the description area of it.

Basically you attach the flag to the background (fixed).

Then the pole moves normally as the page moves. Use z-index and move the flag on top of the pole, and it's quite a cool effect.

I read about it here: http://www.unmatchedstyle.com/gallery/jarred-bishop.php

I have NoScript enabled and see nothing spectacular. This is probably more of a JS trick than a CSS one.

What is the motivation of NoScript in this day and age? You miss so much neat stuff now without out it.

So you can go on web forums and say "Well I really don't see it so you must be cheating with some JS stuff...".

I'm content with Opera's features: You can enable or disable Javascript in main preferences (of course), but you can also momentarily toggle it for your current browsing session, and even store site-specific settings. So, I surf with JS on by default, but turn it off when I happen to run into a misbehaving site, which is pretty rare. That provides for a pleasant enough browsing life.

I installed it when reading HN's RSS feed inside of netvibes, because NYT articles would decide that they didn't want to be framed and take over the hole page.

Then I decided that I liked noscript better than addblock+ and kept it instead.

http://blog.freenode.net/2010/01/javascript-spam/

I use NoScript, but I have "Temporarily allow top-level sites by default" enabled (Base 2nd level domains). Basically, if I visit http://foo.example.com, any script hosted on example.com is allowed to run. Then, on pages that seem to have stuff missing, I'll go ahead and allow scripts from certain sites to run (e.g. akamai.net, aolcdn.com, autotraderstatic.com, googleapis.com, yahooapis.com, youtube.com).

The main point is to limit exposure to XSS attacks. There are still sites (and I'm sure even some linked on HN) that allow comments without properly sanitizing input. This makes it possible for a commenter to embed javascript in a blog comment which would cause a cookie for that site to be sent to an external site, or which takes advantage of a browser vulnerability.

Another reason is to deter a lot of forms of tracking. By not running scripts from the likes of google-analytics.com or quantserve.com (two sources for scripts in this submission), my browsing activity is not followed quite as closely as it otherwise would be.

Finally, I use it to block Flash, Java, and whatever else ads, which only add annoyance and CPU consumption to my browsing experience.

Regardless, the submitted site worked fine for me. The effect is neat but I don't think it really adds a whole lot.

Hmm... looks like I replied to the wrong comment. I meant to reply to this one: http://news.ycombinator.com/item?id=1063142, one of the higher children of the one I actually replied to.

Works for me with JS disabled - maybe you're not looking for the right effect / not impressed?

Does not work on iPhone

Doesn't work with lynx either.

I guess I find these down votes a little surprising. People were giving their 2 cents on whether or not it was working, and the title said it was a CSS trick. So my first impression was that it was compatible with popular browsers, mobile Safari falling in that category in my mind.

I apologize if my comment came across as snark - it was not my intent and I'll go to Reddit if I want to try to be witty.

Dude. It was a light-hearted, good-natured joke, and nothing at all personal.

Unless a sense of humour isn't iPhone compatible either?

Your joke was funny, the -1 hurt me a little. tear

Doesn't work with curl either.

I can confirm that it doesn't work in links2 either.

i laughed for like 5 minutes straight.

Reply on news.ycombinator.com