header jpeg issue

About your second question on how to modify the height of your menu text box, if you want to reduce the height you can add to your style sheet the following code:

.section-inner {
  height: 50px;
}

.blog-menu a {
  padding: 20px;
}

hi kentannenbaum,

i had similar issue with the header image and changed the .header code into following in Style.Css and it worked. see if it works for you…

.header {
background: no-repeat center;
background-size: 100%;
-moz-background-size: 100%;
-webkit-background-size: 100%;
}

Hi akhilz,

Thanks.

I changed the code and it modified the image to fit horizontally, but the vertical is still flattened and way off. Check it out here:

https://www.kentannenbaum.com

The horse image is loaded as a background image, not a primary image. As long as it’s loaded as a background image it will get cropped.
You need to change the size of the header or upload the image as the primary content. Is there anywhere else to upload a header image in the theme settings?

Hey Chris….I’m trying to spot where that code fragment’s located. I thought it would be in the “Navigation” section but is it in “Structure” or elsewhere?

Thanks very much.

msmith993 Hello

Under Appearance > Header, this is the theme instruction, quoted directly:

“You can select an image to be shown at the top of your site by uploading from your computer or choosing from your media library. After selecting an image you will be able to crop it. Images of exactly 1280 × 416 pixels will be used as-is.”

It doesn’t indicate whether it’s a “background” or “primary” image. I don’t see where I see that distinction.

If as you say, I can change the size of the header, being a newbie, I still think I can find the CSS code under “HEADER” on the style sheet. Correct? Thanks!

Your right. Background image has nothing to do with it.

I downloaded your image from your site. And discovered that the image is not 1280 x 416 at 72ppi. Its 307 x 100 at 300ppi.

After I resized the image to the correct size, installed Hemingway in my sandbox, and uploaded the new image to the site. (Appearance > header > select image.) it seems to work for me. See the first link below

https://sandbox.michaelsmithportfolio.com/

Here is a link to the image I fixed. I hope this helps. Download it and give the new image a shot. Ill leave the image available for a couple of days.

https://www.dropbox.com/s/jvvh276c4z94e09/cropped-WEB-BANNER.jpg

Michael. This is peculiar. I may be new to this, but I’ve been shooting pictures for advertising for many years. The dimensions were changed in the upload process. The important thing is that it is correct (obviously on your end) but it remains an ugly crop here after trying it with your version also. I hate to waste people’s time. I guess the CSS code for has been altered to compress the image vertically. They look like short fat horses.
I’ll try to figure it out but that’s certainly not my expertise. Either way, thanks very much.

Don’t worry about it. Web design tends to be a moving target.

If you need more help, or are interested in contracting someone else to do the work feel free to reach out.

It’s more that I’ve taught so many people photography and PS that it’s frustrating when it’s not second nature. I’m trying wordpress because frankly, I can’t afford to have someone build the site. It’s intuitive enough but there are times when I just don’t know where to look. I’ll keep studying and/or some kind soul will point the way.

I totaly understand. Best of luck

Hi Kentannenbaum,

To modify your Menu bar, you just go in Appearance/Editor and find the “Style.css” file for your theme and add those two pieces of code at the bottom and that should work. The style sheet will supersede the original code.

.section-inner {
  height: 50px;
}

.blog-menu a {
  padding: 20px;
}

chris, much appreciated, I’ll proceed with your suggestion.

To my original and main issue, which hasn’t been solved:

I use the Hemingway theme which allows me to change the header image and suggests a max size of 1280×416 px size. When I upload it at 72dpi, the image is fine horizontally but the vertical is compressed from the original dimension.

Here’s the site, the problem’s pretty clear:

https://kentannenbaum.com

Hi Kentannenbaum,
To change the size of the header and menu bar horizontally you can add code to your style.css file. I’ve adjusted your header and menu bar to the same size as the content of your page with the following code. You can just add it at the bottom of the page of your style.css and it should work. You can just adjust the numbers to your liking:

.section.no-padding {
  max-width: 86%;
  padding: 0;
  width: 1040px;
  margin: auto;
}

Hi Kentannenbaum,

I suggest you try doing the resizing inside photoshop and make your image size fit inside the 1280 X 416px limits. Or just cropping it to fit the required measurements. See what happens.