Hacker News Reader

Comment by dmerfield | Hacker News Reader

The following CSS will fit the background image to the page dimensions and eliminate the letter boxing for all viewport ratios.

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

Before: http://bit.ly/NY7ZtE

After: http://bit.ly/POyEaA

View on HN

Wow thanks! We made the change.

Not quite. You've added those to the body element (inline as well, which is a bad idea), whereas the background is on the #wrapper div. I'd suggest moving the background onto the body element, and adding the background-size definitions to the body element but within your CSS.

With that fixed, it looks very nice indeed.

The pulses directly correspond to specific points on the map and we want the points to scale with the map on window resize. Making that change would require some more work from our end. We'll incorporate it later. Thanks though!

Ah. In that case I'd suggest extending the map downwards so that the background image is taller. My browser window is roughly 4:3 and the map cutoff detracts from what is a very nice design.

Reply on news.ycombinator.com