codeforamerica / srtracker

Open311 Service Request Status Site
BSD 3-Clause "New" or "Revised" License
20 stars 23 forks source link

Images are wrong size on Chrome for Retina Displays #59

Closed Mr0grog closed 11 years ago

Mr0grog commented 11 years ago

@2x images are not being sized correctly for the logo in the header and the links in the footer on retina displays in Chrome: Screen Shot 2013-03-04 at 11 32 23 PM Screen Shot 2013-03-04 at 11 32 50 PM

Looks like this is being caused by specifying background instead of background-image in the CSS:

.landing header {
  background: url("../img/311_service_tracker_logo_big_x2.png");
}

In Safari, the shorthand property does not override background-size, but in Chrome it does, so we're losing the size information when we do this.

mwichary commented 11 years ago

Possibly relevant: http://updates.html5rocks.com/2013/02/CSS-Background-shorthand-coming-to-mobile-WebKit-browsers