I have been playing around with the header on my site but want to change it to this: https://drive.google.com/open?id=1eQ-BBNzDZDE3onkIss6GbBXb6CRiiA4l

However im not sure entirely what the best method is to do this? Do I make just 1 png of the whole top banner including logo?

Or is another method best suited as its responsive for all devices.
Thanks

1) Background (red and black image)
2) Logon on left (or top on smartphones)
3) Site description TEXT on right (or below logo on smartphones)

My reasonings are:

1) If I ever change my mind, I can easily edit the site description text without having to re-do the entire image
2) Making one large image will probably make the text too small to read on mobile devices.
3) There may be a little SEO juice from having the site description (if keyword optimized) in text form on the page.

Just my two cents though!

So would you do the black and red image as one complete png in the background if so what size would be best to suit all devices?

This looks great on all devices.

Im just struggling to get the logo (in red) and the text positioned correct on all devices.
At the moment the logo and text are together on one image with transparent background.

Is it better to cut the text off and just use that separate and write the text in the SITE TEXT option?