Title: Header image misaligned Last modified: August 31, 2016 --- # Header image misaligned * [soni123](https://wordpress.org/support/users/soni123/) * (@soni123) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/) * Dear Kharis and team, * I am sizing my header image to 500 height, yet the images are over scaling, such that the pictures are off the frame so one cannot view the complete image. Please can you provide a custom csss code that will size the image to original full width size of the picture and will not scale it in a way that the pictures some features are lost. Please find the original picture and also how it looks when uploaded as header iamge. I would like to apply it throught the site’s header images. * [http://prntscr.com/balpmq](http://prntscr.com/balpmq) (when on website) * [http://prntscr.com/balqdc](http://prntscr.com/balqdc) (original picture) * Appreciate your response. * Thanks Soni Viewing 15 replies - 1 through 15 (of 24 total) 1 [2](https://wordpress.org/support/topic/header-image-misaligned/page/2/?output_format=md) [→](https://wordpress.org/support/topic/header-image-misaligned/page/2/?output_format=md) * [codemovement.pk](https://wordpress.org/support/users/codemovementpk/) * (@codemovementpk) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433334) * Please share your website url, so I can guide you accordingly. * Thread Starter [soni123](https://wordpress.org/support/users/soni123/) * (@soni123) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433338) * [http://bethebees.com/bookkeping](http://bethebees.com/bookkeping) * [codemovement.pk](https://wordpress.org/support/users/codemovementpk/) * (@codemovementpk) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433359) * I suggest that you have to crop your image to 1352px x 400px and this will solve you issue. * Thread Starter [soni123](https://wordpress.org/support/users/soni123/) * (@soni123) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433364) * In doing so some of the pictures will get distorted. Thats the reason I did not resize it. Some of the pictures are square as well. * [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/) * (@kharisblank) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433385) * Dear Soni, * Could you please try to apply the following CSS code through the [Simple Custom CSS](https://wordpress.org/plugins/simple-custom-css/) plugin or child theme’s style.css? * ``` .page-id-729 .header-image{ background-size: 100% !important; background-position: top left !important; } ``` * Regards, Kharis * Thread Starter [soni123](https://wordpress.org/support/users/soni123/) * (@soni123) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433387) * please can you suggest a css code for all pages header apart from home page * Thread Starter [soni123](https://wordpress.org/support/users/soni123/) * (@soni123) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433391) * I would like to align all my header image * [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/) * (@kharisblank) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433394) * Try to use this code: * ``` body:not(.home) .header-image{ background-size: 100% !important; background-position: top left !important; } ``` * Thread Starter [soni123](https://wordpress.org/support/users/soni123/) * (@soni123) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433396) * Dear Kharis, * In apply the above code all images moved downward. I want to retain all aspects and character of a image. how a slider is responsive and sizes itself according to device screen size * [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/) * (@kharisblank) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433459) * Dear Soni, * Could you please try to follow the solution posted at our [support forum](http://athemes.com/forums/topic/slider-images-not-resized-for-iphone6plus/#post-142613)? * I hope that works for you as well. * Thread Starter [soni123](https://wordpress.org/support/users/soni123/) * (@soni123) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433477) * Dear Kharis, * I tried to follow it but it did not work. I t is mostly for mobile and slider. I would require it for header image. I would clearly explain my problem ones again. * I am uploading images of 500px heigh. The width I dont change. After uploading, the image scales to right or left or to or bottom. but does not behave in a responsive way. Such that when I upload the image it should fit into th header image space withiut loosing any corners or feature of the picture. mostly those pictures have scale to one direction. Would request a css code to rectify it. * [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/) * (@kharisblank) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433502) * Dear Soni, * I am afraid, it isn’t possible to maintain the background image visibility vertically as its size is set to 100%. What about changing it to `contain`? * ``` body:not(.home) .header-image{ background-size: contain !important; background-position: top left !important; } ``` * Regards, Kharis * Thread Starter [soni123](https://wordpress.org/support/users/soni123/) * (@soni123) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433513) * Dear Kharis, * The images has moved towards left, leaving half a page blank. Please can you check my website * [http://www.bethebees.com](http://www.bethebees.com) * You can click on any pages and see how it looks after the code is applied. earlier, i did email you my website login details if you need to visit. If you need any other information I will be happy to provide. * Appreciate your help. * [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/) * (@kharisblank) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433533) * Hello there, * Please try this code: * ``` body:not(.home) .header-image{ background-size: contain !important; background-position: top center !important; } ``` * Regards, Kharis * Thread Starter [soni123](https://wordpress.org/support/users/soni123/) * (@soni123) * [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/#post-7433543) * the image is positioned centre but is not full width….is it possible to specify that the images scale to full width but not overscale? Viewing 15 replies - 1 through 15 (of 24 total) 1 [2](https://wordpress.org/support/topic/header-image-misaligned/page/2/?output_format=md) [→](https://wordpress.org/support/topic/header-image-misaligned/page/2/?output_format=md) The topic ‘Header image misaligned’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/sydney/2.67/screenshot.png) * Sydney * [Support Threads](https://wordpress.org/support/theme/sydney/) * [Active Topics](https://wordpress.org/support/theme/sydney/active/) * [Unresolved Topics](https://wordpress.org/support/theme/sydney/unresolved/) * [Reviews](https://wordpress.org/support/theme/sydney/reviews/) ## Tags * [header image](https://wordpress.org/support/topic-tag/header-image/) * 24 replies * 3 participants * Last reply from: [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/) * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/header-image-misaligned/page/2/#post-7433588) * Status: not resolved