CODEWITHSUNDEEP
cssresponsive-design
xyz
xyz

Reputation: 2300

How to make Header image responsive?

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?

Upvotes: 2

Views: 26595

Answers (1)

Gavin Anderegg
Gavin Anderegg

Reputation: 6391

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

Upvotes: 6

Related Questions