Issues with Header image, how to fix

[jskintauy]

Hi All,

I am having an issue with putting in image in the header (Pretty Pictures theme). The image goes in fine, but when you view the site the header image shows offset lighter images to the left. When I look at the element in firebug (and when you switch these settings off in Firebug, the issue disappears) this is the CSS:

.custom-header #header {
background: url("http://127.0.0.1:8080/wordpress/wp-content/uploads/2013/08/cropped-angeldogheader10.png") no-repeat scroll 0 0 transparent !important;
}

The problem is that this is listed as being on line 23 in style.css. This is clearly not possible, as the actual styling doesn't start until line 65. Line 23 is in the middle of the commented out section at the top of the file. I looked at the custom header settings in function.php (where this probably must be fixed) and I don't really see how to modify the settings. Any ideas of how to correct this?

Thanks ahead.

Jim

[Stefsull]

Is there a link to the site?

[jskintauy]

Hi and thanks for the reply,

Unfortunately, (or fortunately, it's not ready for production!) it is on a local development machine.
I do have a bit more detail though that I overlooked. The code listed above that I unchecked (and then the image displayed correctly) is listed as coming from "#2 Line 23", not style.css. The #2 looks like some kind of id referencing a file.
I am assuming I need to remove the custom header and put it back in with different settings in functions.php. Am I on the right track here?

Thanks ahead,

Jim

[jskintauy]

Hi All,

I know this is a weird problem, but I have found a poor workaround. When I insert any image (btw - size is exactly 1600x550, so no crop) it looks like there are two images slightly offset. When I remove a block of code in Firebug as above, the image displays properly. It looks like this setting comes from the custom header settings in function.php. So, I decided to modify those settings. This is from function.php:
/** Add support for custom header */
add_theme_support( 'custom-header', array(
'default-image' => get_stylesheet_directory_uri() . '/images/header.jpg',
'flex-height' => true,
'flex-width' => true,
'header-text' => false,
'height' => 550,
'width' => 1600,
) );
None of these settings seemed related except possibly the default-image, which I commented out. It did nothing. So, I decided to comment each of the other settings (why height or width or the others would matter...) So, finally, I commented the whole thing out, which was, in essence, what Firebug was doing. Magic, it worked fine...except, as expected, there is no Header settings available in the dashboard.
I did several other things including removing and adding custom header with different settings. This resulted in either the image not displaying at all, or the offset double image, which was the problem in the first place.
Can anyone tell me what is going on and possibly how to fix it?

Thanks ahead for any response.

[Stefsull]

It's super hard to tell you because I don't know your theme and can't see your code, BUT, what I suspect is this.

Since your theme has a custom header added in your function.php file—and it has the same dimensions as the one you want to replace it with, instead of adding the changed header via your CSS, just change the values in this function:

/** Add support for custom header */
add_theme_support( ‘custom-header’, array(
‘default-image’ => get_stylesheet_directory_uri() . ‘/images/header.jpg’,
‘flex-height’ => true,
‘flex-width’ => true,
‘header-text’ => false,
‘height’ => 550,
‘width’ => 1600,
) );

I'd test by putting a version of your own image in the directory their 'header.jpg' is in - and change its name to header.jpg. If the height and width are the same, you should see theirs disappear and yours appear.

If you later want your custom name, you can then change their function to have the name of your file instead of header.jpg. This should work.

[jskintauy]

Hi and thanks for the reply,

The them is Pretty Pictures and I am using Genesis 2.01.

Being a local development environment sure makes it tough. Further, I do have several plugins that could conceivably be causing an issue. I did deactivate one in particular (Genesis Extender) to see if it made a difference and it didn't.

I hadn't considered renaming my file image file to header.jpg or changing the name in the function to match. Great thought and I will try it and let you know if it works.

Jim

[jskintauy]

Hi Again,

I am going to change this to resolved. The image I was using was a .png. When I changed the filename to "name_of_file.png" no matter what I did it wouldn't work. When I changed it to "name_of_file.jpg" it worked fine. Interesting? This makes me think it has something to do with transparency, but for the life of my I don't know why. Well, it doesn't matter, it works when the filenames match and its a .jpg instead of a .png.
Thanks for the great suggestion / solution!

Jim

[Author]

Posts