- This topic has 9 replies, 2 voices, and was last updated 7 years, 5 months ago by
.
-
Posts
-
Hello,
I see that the recommended image size for a custom header is 1350 x 130 px. I’d like to use an image that is 1350 x 350. Can you tell me how to do that (perhaps with some CSS?).
Thank you.
David Coleman
Hello @dcoleman,
To display the image in the header in your desired size please paste in the following custom CSS in your Admin Dashboard > Appearance > Customize > Theme Options > Advanced options > Custom CSS :
@media (min-width:1024px) { #masthead { height: 350px; } }Please make sure your uploaded image has the required dimensions and also skip cropping of image when you are prompted while adding the image in the header.
Hope this Helps,
Best Regards !!
Hi,
Thanks for the reply. That seems to work somewhat, but there are two issues that aren’t quite right.
First, my image appears a bit too large within the space (like it’s blown up to about 110% or so of the original size), and the outer edges are cropped off (I did no cropping as you suggested). Again, I’m using a 1350 w x 350 h pixel image.
And secondly, when I resize the browser window, instead of scaling down nicely like the slide images do (and keeping the entire image in view, but smaller), the header image gets cropped so that the smaller you size the browser window, the more image you lose.
Hope this explanation makes sense. Thanks so much for your help!
David
Hello @dcoleman,
Please provide to us your site URL so that we can inspect your website and provide a CSS fix specific to address your issues.
Best Regards !!
Hello,
Here is the site URL:
When you resize the browser, you’ll see the header image get cropped.
And here is the original image that’s being used in the custom header. If you look at the image (link below), you’ll see that it appears too large within the custom header from the start.
http://aworldinspired.org/wp-content/uploads/test.jpg
Thanks again for your help!
David
Theme as tested in latest version has no such issue. Please try to reupload the original size and it should be working fine. There could be some issue while you upload header image before.
Let us know if you still have this problem.
Hi Guys,
I uploaded again as you suggested with the original 1350 x 350 pixel size. Unfortunately, the problem remains the same (on all browsers for both Mac and PC). I’m also still using the custom CSS you gave me:
@media (min-width:1024px) { #masthead { height: 350px; } }
I put the CSS in Appearance…Customize…Theme Options…Advanced Options.
Also, I deactivated all plugins to see if it might be a plugin issue, and the problem remained.
Finally, I made a quick video of the problem for you to look at. You can see it here:
https://www.youtube.com/watch?v=7Xx7d2VI0Ug
Hope this helps!
David
Hello @dcoleman,
To resolve your issues please remove the previous Custom CSS and add the following custom CSS Code below :
@media (min-width:1024px) { #masthead { height: 350px; background-position: center left; } } @media (max-width:1024px) { #masthead { background-size : contain; } }The code will address your issue of banner being zoomed in larger screens and also should shrink the image in the header bar in smaller screens ( resizing window ).
Hope this Helps,
Best Regards !!
That did it!
Thank you so much for your help with this problem.
I really appreciate your ongoing support!
All the best,
David
Hello,
Nice to know that the problem has been solved. If there are any further query, then, please feel free to post them.
We will really appreciate if you could help us too by rating our theme in WordPress repo here:-
https://wordpress.org/support/theme/wen-corporate/reviews/Thanks !!
- You must be logged in to reply to this topic.
