Question

I have added a header image to my site with:

#header_area {
    background: url('my_header_image.com');
    background-repeat:no-repeat;
    background-position: top center;
}

My site is responsive except the Header.

Is there a way to make my header responsive?

Answer 1

When making a background-image responsive, you can use the background-size property. In the case of the above code, so long as your #header_area element has an implicit width (or an explicit one set with media queries), you should be able to say:

#header_area {
    background: url('my_header_image.com');
    background-repeat:no-repeat;
    background-position: top center;
    background-size: 100%;
}