How to Header Background Image Responsive

[crawling]

Hello

 

I am working on a site and the theme is a responsive theme but the header background is not resizing on mobile and tablets below is a link to the site

http://unitednews.sr/category/news/

each category / page has a unique header , this is what I have in css for category news

body.category-news  #header-wrap { background: url( http://unitednews.sr/wp-content/uploads/2014/10/Header_UnitedNews.jpg);
background-repeat:no-repeat;
}

Adding background size: cover does not work

any idea ?

Edited November 13, 2014 by crawling

[QuickOldCar]

Try

padding-bottom:10%;

Can also try things like

max-width: 100%;
height: auto;

[crawling]

 

Try

padding-bottom:10%;

Can also try things like

max-width: 100%;
height: auto;

 

Thanks but that code does not work either

[maxxd]

Try 'background-size:100% auto;' in the #header-wrap definition.

[crawling]

Try 'background-size:100% auto;' in the #header-wrap definition.

Thank you Maxxd , now this code works , but now i get a huge white space under the header image .

how do i fix that ?

body.category-news  #header-wrap { background: url( http://unitednews.sr/wp-content/uploads/2014/10/Header_UnitedNews.jpg);
background-repeat:no-repeat;
background-size:100% auto;
}

[crawling]

background-size:100% 100%;

The above code removes the white space but now the image looks bad when resized .

[maxxd]

You may have to tweak the height values for the .category-news div to get things placed correctly. Play with different values (or removing the values completely) and see how it looks. CSS is as much - if not more - an art as it is a science.