How to set header image

risko375 · February 24, 2019, 5:21pm

I have this image 1440x67 which i’m trying to make responsive. I need to keep the green part centered as the browser reduces. It sits in a 200px high header. some centred text needs to sit on top of it and stay centered as the browser reduces. At an 800px breakpoint th image is switched out for the 640x249 mobile image

Should I set it as a background image with background-position set to centre?
I can’t set background-size: cover as that would stretch it out to fit 200px, so not sure how to vertically centre?

Thanks

jenovs · February 24, 2019, 6:04pm

Use codepen.io to show us your code.

freecodecampram · February 26, 2019, 6:26am

why don’t you use background-color instead of image?
or
just write the text what you need on green image using any image tools(like photoshop), and save it in different size for what you looking for different break point and simply attach it using img tag then change the source as per window width.