Make header responsive for different screen resolutions

Question

I am trying to make header responsive. Currently header is fixed and when you view it from different screen resoultions it is not lookin good.

#tie-wrapper #theme-header {
    background-image: url(http://example.com/header-image.jpg);
    background-repeat: no-repeat;
}

I wish to have same image on different resolutions. It should decrease with website. Also logo is centered so the image should be.

I really don't know how to add this image for different resolutions.

Thanks

Answer 1

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 (max-width: 480px) {
    #tie-wrapper #theme-header {
        background: url('http://example.com/header-image_MEDIUM.jpg') center center/cover no-repeat;
        min-height: 300px;
    }
}

I will normally add this code into my template file and using wp_get_attachement(), load up different sizes of images. Or you can hard code it in your styles.css. Either way.