How to make Header image responsive?

Question

I have added a header image to my site with:

#header_area {
    background: url(\'my_header_image.com\');
    background-repeat:no-repeat;
    background-pos         


        

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%;
}