Resizing a logo at different sizes and selecting

Question

1) How would I select the image under this div for the logo only?

 <div id="logo"><a href="myurl.com"><img src="mysite.com/logo.jpg" title="My Logo" alt="My Website"></a></div>

Would it be?

#logo.src {

}

2) Ideally I would like to reference a different smaller logo as my page hits a certain size. Can I add the logo src in the div as a background image and then reference to it in a stylesheet?

eg for 768px
#logo {
background-image: url('/logo-768px.jpg');
background-repeat: no-repeat;
}

then

eg for 480px
#logo {
background-image: url('/logo-480px.jpg');
background-repeat: no-repeat;
}

Answer 1

The second option:

Add this to your head:

<meta name="viewport" content="width=device-width, initial-scale=1">

And your CSS will be:

@media screen and (max-device-width: 767px){ /* From 0px to 767px */
  #logo {
    background-image: url('/logo-480px.jpg');
    background-repeat: no-repeat;
  }
}
@media screen and (min-device-width: 768px){ /* From 768px and up */
  #logo {
    background-image: url('/logo-768px.jpg');
    background-repeat: no-repeat;
  }
}

The viewport tag defines the width of the screen and makes the CSS device-width work. I can try to explain it myself but there are very good articles about it: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 2

To target only img:

#logo a img {
 /*style*/
}

And read this: http://alistapart.com/article/using-responsive-images-now

And this: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/