crawling Posted November 13, 2014 Share Posted November 13, 2014 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 ? Link to comment https://forums.phpfreaks.com/topic/292440-how-to-header-background-image-responsive/ Share on other sites More sharing options...
QuickOldCar Posted November 13, 2014 Share Posted November 13, 2014 Try padding-bottom:10%; Can also try things like max-width: 100%; height: auto; Link to comment https://forums.phpfreaks.com/topic/292440-how-to-header-background-image-responsive/#findComment-1496489 Share on other sites More sharing options...
crawling Posted November 13, 2014 Author Share Posted November 13, 2014 Try padding-bottom:10%; Can also try things like max-width: 100%; height: auto; Thanks but that code does not work either Link to comment https://forums.phpfreaks.com/topic/292440-how-to-header-background-image-responsive/#findComment-1496504 Share on other sites More sharing options...
maxxd Posted November 13, 2014 Share Posted November 13, 2014 Try 'background-size:100% auto;' in the #header-wrap definition. Link to comment https://forums.phpfreaks.com/topic/292440-how-to-header-background-image-responsive/#findComment-1496519 Share on other sites More sharing options...
crawling Posted November 14, 2014 Author Share Posted November 14, 2014 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; } Link to comment https://forums.phpfreaks.com/topic/292440-how-to-header-background-image-responsive/#findComment-1496549 Share on other sites More sharing options...
crawling Posted November 14, 2014 Author Share Posted November 14, 2014 background-size:100% 100%; The above code removes the white space but now the image looks bad when resized . Link to comment https://forums.phpfreaks.com/topic/292440-how-to-header-background-image-responsive/#findComment-1496557 Share on other sites More sharing options...
maxxd Posted November 14, 2014 Share Posted November 14, 2014 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. Link to comment https://forums.phpfreaks.com/topic/292440-how-to-header-background-image-responsive/#findComment-1496578 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.