Change the homepage background photo on mobile devices

aribix

Hey everyone - Long-time reader, first-time poster. I'm trying to to show a different homepage photo when someone visits my site from a smartphone, but can't get it to work.

Currently, I show this photo as my homepage background: photos.smugmug.com/Landscapes/Color/i-ZCBbBQC/3/6a2ddb3c/X3/DSC_2396-X3.jpg
When someone visits from a smartphone, I want to instead show this photo: photos.smugmug.com/Landscapes/Color/i-kmNJ5Pj/0/a990ab6c/XL/36816581765_50d48c451f_o-XL.jpg

In the theme's CSS, I've tried two different methods to change this photo when someone visits from a mobile device.

Attempt 1:
@media only screen and (max-width: 640px)
{
.sm-image.sm-tile-limit-width { content:url("photos.smugmug.com/Landscapes/Color/i-kmNJ5Pj/0/a990ab6c/XL/36816581765_50d48c451f_o-XL.jpg"); }
}

Attempt 2:
@media only screen and (max-width: 640px)
{
.sm-image.sm-tile-limit-width { display:none; }
.sm-image.sm-tile-limit-width { background:url("photos.smugmug.com/Landscapes/Color/i-kmNJ5Pj/0/a990ab6c/XL/36816581765_50d48c451f_o-XL.jpg"); }
}

No luck either way. Any thoughts appreciated.
Thanks!
Ari

Hikin' Mike

A link to your site...