Scalable images

I have a logo that I want in a < h1 > and text indent logo name off screen using the background-image property in css this is fine but I cannot make the logo image flex in size without providing an image for every css media query so not really flexible but more changing at break points, and would misse those new device widths etc. that I do not yet know

However If I add logo to html as an < img > (also defining it as content rather than style...) within my to < h1 > I can make img max-width:100%; and flex in a container...however I cannot indent the text (logo name) off as it moves image too?