crawling Posted November 13, 2014 Share Posted November 13, 2014 (edited) 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 Quote 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; Quote 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 Quote 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. Quote 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; } Quote 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 . Quote 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. Quote 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
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.