In Wordpress, Getting The Site URL Inside a Stylesheet

In Wordpress, Getting The Site URL Inside a Stylesheet

I'm doing a responsive theme for a site. I need to be able to change a
div's background image when the window size is smaller than 420px.
I needed to be able to reference the site url in order to set the
background image in the first place, so originally I used a PHP tag and
inline styling like this:
<div style="background-image: url('<?php echo bloginfo('template_url') .
'/images/home.jpg'; ?>');"></div>
But I need to change that background image when the window gets smaller.
All the other responsive css is going in this media query, inside style.css:
@media (max-width: 420px){
div {
}
}
Here's my plan. I could either do use style tags on the .php page to use
that same php snippet to get the url, and hence the image. But, that style
tag doesn't seem to take any affect...
<style>
@media (max-width: 420px){
.home-background {
background-image: url('<?php echo bloginfo('template_url') .
'/images/home_page/bg-mobile.jpg'; ?>');
}
}
</style>
Or, I could use javascript, but I want to try and avoid that, as it seems
hacky to me...
How can I reference the site URL inside my style.css so I can change the
background image on the fly