Header image no longer works after editing theme using WP edit CSS option

I’m not seeing a blank white space, did you get this sorted out?

Please be careful and make sure you’re not editing your theme’s CSS directly. If you do that, all your changes will be erased and overwritten the next time you update the theme to the latest version.

Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

If you’ve made edits directly to your theme, I’d strongly recommend that you move out all your changes into the Jetpack CSS editor and restore a fresh copy of your theme’s stylesheet to prevent any surprises the next time you update the theme.

If you need more detailed help with any of this, just let me know where you’re getting stuck!

Thank you for responding so quickly, Kathryn. I’d really like to rectify this asap.
Firstly, I don’t ever touch any of my themes original files. As I stated I am editing the theme by using WP Edit CSS option from my admin panel.

The following link will take you to a pic of what the theme header image looks like now (the blue flowers), then underneath you’ll see how the header looks AFTER after adding my own CSS.

https://drive.google.com/file/d/0B70y2op7ZdSkZ3dyZHhkRndPN0k/view?usp=sharing

If I might add, the only adage I made of the original css style were to the colors, everything else remains as in the original style sheet, so I’m at a loss as to why this would affect me being able to upload and add my own header images as per usual before customizing the theme’s style.
Clear as mud?

Here is a better before and after of my site page.
https://drive.google.com/file/d/0B70y2op7ZdSkOVFvd1RZUDJhTDg/view?usp=sharing

Thanks again for your help ??

Thanks for clarifying. I wasn’t clear you were referencing a custom CSS plugin – sorry about that!

Could you please go ahead and paste all your custom CSS here – between code tags – so I can do some testing? Thanks. If there’s a lot of it, you can use a Pastebin instead and provide a link here.

https://pastebin.com/

Kathryn,
To avoid any further confusion, I’ve outlined below exactly what I did, step by step to create my new theme using the custom CSS.
Hopefully by doing so you or someone else might be able to spot what might be causing the problem (Header not appearing):

1. In WP admin panel on left I selected, Appearance >>Editor
I selected the entire code and copied to pasteboard (this is the only time I touch the “original stylesheet)
2. In WP admin panel on left I selected, Appearance >>Edit CSS
I pasted the code I copied from “Editor” into this blank sheet.
3. After pasting I went through the entire copied code and changed all color tags, i.e, #ffffff, #000, etc., to colors codes I want for my new theme, i.e., #ededeb, #d2f088, #999, etc. previewing each change during the process by selecting “Preview” on the right.
4. Once satisfied with all color changes I selected “Save Stylesheet”
5. Finally, sliding over to top left of page I click on my site name to preview the results. Everything looks perfect, EXCEPT! There is is no header image. Site name and sub-title is there and nothing else.
TO DOUBLE CHECK I DID THE FOLLOWING:
6. In WP Admin I select Appearance>>>Customize >>Header Image
I have two(2) header images uploaded there, Both are the exact dimensions of 1100px x 180px, and I have selected “randomize uploaded headers” and all is “Saved”. Now I am stuck…I have no idea why my header images are not displaying when the entire rest of the codes works. The following is a copy of my custom CSS as requested:
===============
https://pastebin.com/Lx2em087

Thanks ever so much for helping me figure this out.

Thanks for listing out all these steps!

One thing I see right away is that you’ve copied the entire stylesheet into your custom editor. When adding custom CSS, you should only be pasting in the styles you want to override – not the entire stylesheet. For example, if you wanted to change the colour of .post-title, you would only add a new declaration for that style, and nothing else.

With the entire stylesheet of over 1800 lines now included in your custom CSS, it makes it much, much, harder to troubleshoot the issue.

I will take a look at this on a test site but you might need to delete everything except your modified styles in order to troubleshoot efficiently, since this is a huge amount of code to go through! I’ll keep you posted.

Removing these three declarations from the custom CSS should un-hide your custom header:

#branding {
	background: url(images/pink-header.png) no-repeat #fff;
	border-radius: 4px;
	box-shadow: 5px 5px 5px -5px rgba(0,0,0,0.5), -5px 0 5px -5px rgba(0,0,0,0.5);
	min-height: 180px;
	margin: .9em 0;
}

#branding hgroup {
	padding: 3em 0 0 .5em;
}

#branding .header-link {
	display: table-cell;
	position: absolute;
	width: 80%;
	min-height: 180px;
}

I’d still strongly recommend that you sift through the stylesheet and remove anything unrelated to the changes you want to make. It’ll make future troubleshooting easier, remove duplicate code that could cause other issues, reduce loading time, and make your theme more future-proof.

Let me know how it goes!

Kathryn,
This is excellent info. I will do as you suggested and followup here within the next couple days with my results, but it appears my issue is about to be resolved. Thank you very much for all your time and effort f:)
Joan

You’re very welcome!

Kathryn!
I am so excited! Thanks to you, the issue I had regarding my header image not loading is now resolved. Here is what I did as per YOUR suggestions:
===
Kathryn wrote:
“When adding custom CSS, you should only be pasting in the styles you want to override – not the entire stylesheet. For example, if you wanted to change the colour of .post-title, you would only add a new declaration for that style, and nothing else.“
===
So basically, I erased everything and started from scratch, only entering into the custom CSS editor the changes I want to make and that did the trick.
Here is my happy little Blog as it should appear:
https://severed-ear.joan-a-brown.com/

Lesson learned?:
DO NOT COPY AND PASTE THE ENTIRE ORIGINAL CSS CODE FROM EDITOR INTO NEW CUSTOM STYLE.
I think it’s safe to consider this one [resolved]. I AM happy again…

Thank you BIG TIME, Kathryn, you’re the best! ??

Wonderful! I’m very happy to help – and I’m glad you got your CSS nice and trimmed-down, and that your custom header is working again. Yay!