Please share your website url, so I can guide you accordingly.
I suggest that you have to crop your image to 1352px x 400px and this will solve you issue.
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.
Dear Soni,
Could you please try to apply the following CSS code through the 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
please can you suggest a css code for all pages header apart from home page
I would like to align all my header image
Try to use this code:
body:not(.home) .header-image{
background-size: 100% !important;
background-position: top left !important;
}
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
Dear Soni,
Could you please try to follow the solution posted at our support forum?
I hope that works for you as well.
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.
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
Dear Kharis,
The images has moved towards left, leaving half a page blank. Please can you check my website
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.
Hello there,
Please try this code:
body:not(.home) .header-image{
background-size: contain !important;
background-position: top center !important;
}
Regards,
Kharis
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?
