[Solved] Make header responsive for different screen resolutions

You can use different images at different screen widths using css: @media only screen and (max-width: 1023px) { #tie-wrapper #theme-header { background: url(‘http://example.com/header-image_FULLWIDTH.jpg’) center center/cover no-repeat; min-height: 500px; width: 100%; } } @media only screen and (max-width: 767px) { #tie-wrapper #theme-header { background: url(‘http://example.com/header-image_LARGE.jpg’) center center/cover no-repeat; min-height: 400px; } } @media only screen and … Read more