Responsive background image resolution

Responsive background image resolution

I'm having issues with background image scales and responsive design.
I have a simple header image background along with a content image
background. The header image is supposed to merge seamlessly into the
content. Both images have fine grain textures, so they need to be the same
scale at all times.
The header background is in an <img> tag, while the content is a
background-image, as it needs to utilise the repeat-y functionality for an
unknown amount of content...
But you can see the grain difference between the scaled inline image, and
the background:

I'm aware of the background-size attribute, but this is not backwards
compatible, and I'm unsure if it caters responsively.
My CSS:
#header{
max-width:700px;
width:100%;
margin:0 auto;
}
#header img{
max-width:700px;
width:100%;
}
#content{
max-width:700px;
width:100%;
height:600px; // <-- for testing with no content
margin:0 auto;
background-image:url('../imgs/bg-main.jpg');
background-repeat:repeat-y;
}
The Relevant HTML:
<section id="header">
<img src="lib/imgs/bg-top.jpg"/>
</section>
<section id="content">
<!-- content goes here !-->
</section>
Any help on a fix or some options would be great.