Background header for ipad and different Screen Sizes in Twenty Thirteen

I quite like the look and feel of twenty thirteen but I have come across a common problem with regard to the non-responsive header.

Has anyone come up with a step by step way to create a responsive header/background header in twenty thirteen using a

child theme?

I have read through numerous posts over the past 3 days and everything seems to be a bit of coding in the parent files and more coding in the child theme. My favorite post is from findurlaptop below (which seems to make sense) but for some reason even though I have created 3 separate images, one for mobile iphones, one for ipads and a third for normal computer screens and placed the code in the custom-header.php file of the child theme, for some reason it does not call the images.

https://www.findurlaptop.com/tech/2013/08/23/responsive-header-background-wordpress-twenty-thirteen/

I suspect the reason is because the background is defaulting to the main image in Appearance > header section but I’m not a developer. However, the site is reading the code I inserted into the style.css part of the child theme so at least that’s a start.

Does anyone have the latest, most comprehensive instructions for achieving a responsive header coded through a child theme?

If so I would be eternally grateful.