Title: Responsive Header Image Last modified: August 31, 2016 --- # Responsive Header Image * Resolved [gregorywprice](https://wordpress.org/support/users/gregorywprice/) * (@gregorywprice) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/) * I have uploaded an image 1000 x 150 as recommended then set as header image. * The image is not responsive on mobile devices and does not resize. * Any help to fix this would be greatly appreciated. Viewing 15 replies - 1 through 15 (of 15 total) * [Brian](https://wordpress.org/support/users/brianmiyaji/) * (@brianmiyaji) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069328) * [@gregorywprice](https://wordpress.org/support/users/gregorywprice/) This could be a bit tricky because the size of the header would be independent of the background image. One possible solution would be to add some CSS that automatically covers the header area with the background image, but this means that the image would be larger than 100% on mobile devices. * Try adding this CSS: * .header-area-custom { background-size: cover; background-position: center; background- repeat: no-repeat; } * Let me know if that works, or if you had something else in mind. If we come up with a good solution I’d like to add it to the theme 🙂 * Thread Starter [gregorywprice](https://wordpress.org/support/users/gregorywprice/) * (@gregorywprice) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069337) * That centered the image but didn’t re-size it. * I added: .header-area-custom { background-size: 100%; background-position: center; background-repeat: no-repeat; } * and it re-sized the image but centered it between the menu and top of page on mobile device. * Now I would like to have it positioned directly on top of the menu with no space above or below. * [Brian](https://wordpress.org/support/users/brianmiyaji/) * (@brianmiyaji) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069350) * [@gregorywprice](https://wordpress.org/support/users/gregorywprice/) I’m not sure how this should work. Do you want the header area to automatically resize based on the background, rather than its content? * Thread Starter [gregorywprice](https://wordpress.org/support/users/gregorywprice/) * (@gregorywprice) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069356) * The image re-sized fine and I’m happy with the size of it but just want it to sit directly above the menu with no space between the menu and the re-sized image. * [Brian](https://wordpress.org/support/users/brianmiyaji/) * (@brianmiyaji) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069359) * [@gregorywprice](https://wordpress.org/support/users/gregorywprice/) Like this? * ``` .header-area-custom { background-size: 100%; background-position: center bottom; background-repeat: no-repeat; } ``` * Thread Starter [gregorywprice](https://wordpress.org/support/users/gregorywprice/) * (@gregorywprice) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069360) * Yes worked perfectly! * Now anyway to remove the space above the header and top of page? * Thread Starter [gregorywprice](https://wordpress.org/support/users/gregorywprice/) * (@gregorywprice) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069363) * Sorry the space between the top of the header and top of the page? * [Brian](https://wordpress.org/support/users/brianmiyaji/) * (@brianmiyaji) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069364) * [@gregorywprice](https://wordpress.org/support/users/gregorywprice/) This is the tricky part. To remove space, we’d need to resize the header based on its background image (rather than the content, which is the logo and site title). There are no native CSS properties that do this automatically, since it’s technically a div with a background rather than an image. * I could suggest cropping the background image larger, so that it covers the space at the top when the div gets taller on mobile. * Thread Starter [gregorywprice](https://wordpress.org/support/users/gregorywprice/) * (@gregorywprice) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069367) * I don’t use a background image so its just the default light grey which surrounds the site. * How would I make the space white in colour? * Thread Starter [gregorywprice](https://wordpress.org/support/users/gregorywprice/) * (@gregorywprice) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069368) * I forgot to mention that I don’t use the logo or site title. I made an image banner which I am using at the top of my page. * [Brian](https://wordpress.org/support/users/brianmiyaji/) * (@brianmiyaji) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069406) * [@gregorywprice](https://wordpress.org/support/users/gregorywprice/) Ah that makes sense! Try this: * ``` .header-area-custom { background-size: 100%; background-position: center bottom; background-repeat: no-repeat; background-color: #fff; } ``` * Thread Starter [gregorywprice](https://wordpress.org/support/users/gregorywprice/) * (@gregorywprice) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069485) * Awesome that worked. * Thanks for your help Brian! * If you could take a look at my other posts and see if you could help me that would be great. * [Roch](https://wordpress.org/support/users/rochesterj/) * (@rochesterj) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-7069626) * We’ll check them and reply as soon as we can! * Kind Regards, -Roch * [driorio](https://wordpress.org/support/users/driorio/) * (@driorio) * [9 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-8799342) * Dear all, * how can i have access to the CSS codes? I want to resize my size title on Rookie theme (sportspress pro) so it fits better on mobile phones… * Thank you!! * Marco - This reply was modified 9 years, 1 month ago by [driorio](https://wordpress.org/support/users/driorio/). * [Roch](https://wordpress.org/support/users/rochesterj/) * (@rochesterj) * [9 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-8805626) * Hi Marco! * If it’s something simple we’ll be able to help you. Please open a new ticket with an example. * Thanks! * Kind Regards, -Roch Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Responsive Header Image’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/rookie/1.5.4/screenshot.png) * Rookie * [Support Threads](https://wordpress.org/support/theme/rookie/) * [Active Topics](https://wordpress.org/support/theme/rookie/active/) * [Unresolved Topics](https://wordpress.org/support/theme/rookie/unresolved/) * [Reviews](https://wordpress.org/support/theme/rookie/reviews/) * 15 replies * 4 participants * Last reply from: [Roch](https://wordpress.org/support/users/rochesterj/) * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/responsive-header-image-13/#post-8805626) * Status: resolved