Change header logo based on screen width

Hello,

I would like to achieve the following:

1) resize the logo header with css from a larger image so that it stays crisp

2) start with a width of 280px for fullscreen

3) change to a different starting logo image for less than 1000px screen width, which is a transparent .png and I would like it to overhang slightly – with css like this:
#header_meta {z-index: 1;}
#header_main {z-index: 3;}
strong.logo {top: -55px; height: 120px !important; width: auto;}
h1.main-title {padding-left: 250px;}

4) show small version when scrolling (as-is now)