Before uploading my custom header background .jpg I downloaded the thanksroy.jpg from the theme. It was 1400x300. I cropped my personal image to 1400x300 and uploaded to the theme. The resultant image is only showing part of the 300 width. Where in the css can I change this? Also I would like to make the fat black line under the image a little thinner?
Thanks for any help....Jerry
Maybe I should have re-phrased this question. I used the latest "thanksroy" theme (Date: Jan 21, 2016) and it appears to be broken. Even picking the default header background image included with the theme, does not clearly show the image or the text. Appears to be a sizing issue. Any help?
Can you post a screenshot of what looks wrong?
Certainly. Thanks for the help. Not sure how to post image on this forum so placed it on my website. Download from: trechnus.com/downloads/thanksroy.jpg
Screenshot with an upper corner excerpted. You can see my browser tabs at the top. I picked the "thanksroy" theme, and went to "Appearance" and "Configure Theme". I picked the thanksroy.jpg from the images folder of the theme and installed it as the header background. Then the screenshot. The thanksroy-sm.jpg gets equally distorted if it's picked for the header image.
The header background for Thanks, Roy is set to "cover", so the browser just scales the image to cover all the space in the header and then crops off the top and bottom if the dimensions don't match. The left-to-right width of the header in Thanks, Roy is dynamic, so the header image will actually "zoom in" as you make the page wider.
The stuff you're talking about can all be changed in CSS. You're looking for styles for the
header element. You can change the background-size to "contain" so it will scale the image you pick to fit without cropping. The black bar is the bottom border of the
header element and you can change its width in the CSS.
Thanks. Will give that a whirl. I tried "contain" once and still wasn't satisfied so I will experiment with that and cropping the image. I was frustrated because the default thanksroy.jpg looked nothing like the screenshots of the theme. Which is why I cropped my image to match the default dimensions of thanksroy.jpg.
Do you know approximately where in the css I can change the vertical width of the header background? To display a banner that is vertically taller?
The header's dimensions for Thanks, Roy are usually controlled by the
#site-title contained within it. Increasing the top and bottom padding of
#site-title is probably the simplest way to make the header taller.
Never mind....got it. Thanks for helping me think it through!
I'll look into whether there's something we should change about the sample header file(s) and the theme's screenshot to be a little more clear about how this works.
Actually instead messing with the #site-title I just set a fixed height above background-size. Seems to be working fine.