Hi,
Your image displays all right, but it’s a HUGE 2000x1200px image and only the top portion (which is blank/white) covers the header of your website… that’s why it seems as though the image doesn’t display.
Here is your current header image:
http://writingradish.com/wp-content/uploads/2019/01/header1.jpg
Crop and resize this image to the EXACT dimension recommended by your theme BEFORE uploading it.
I’d like to know how it goes, and I’m here to give further guidance if you need further help.
Good luck!
Hi George @gappiah,
Thanks for the reply. My theme actually recommended the size of 2000x1200x but I have tried resizing it to much smaller sizes and still nothing at all shows up. As you might be able to see now, I’ve cropped the image to by tiny but nothing at all shows.
It there but you don’t have anything in your header. Your header size has a height of 0 so nothing is showing up. Try adding some information into your header and you should see the background. You could add a rule like this
min-height: 700px;
}`
then you would see the background.
-
This reply was modified 5 years, 2 months ago by
mrtom414.
There seems to be something else at play here, actually two things:
1) The inner div with class top-header-wrap has a background image of #fff, effectively covering the main header background image.
2) Even after fixing above, the top section (above the menu) will still be white because of the problem I mentioned in my earlier post: the top of the background image is WHITE, making it appear as if there’s no background image. OP can confirm this by uploading an image which has some colour other than WHITE at the top. (In fact, if you change the height as suggested above, the logo will appear in the middle of the screen, and not at the top — because the top of the image is WHITE)
Thank you both for the help! The header is showing now which is great, but I would like it to be above the menu rather than below and I can’t see an option for this. Any ideas on how I could do this?
the header has an overlay that is set to a black with an alpha level of .5 making it 50%
transparent changing this setting would cause the image to be tinted.
To Move your header and nav bar you would have to create a child theme and edit the header.php file.
Hello @writingradish,
I’ve mentioned the main problem above twice already, but you don’t seem to be listening.
Please prove me wrong by doing this simple test:
Right-click the image below, download it your computer, and upload it as your site header image. This is just temporary… to demonstrate why your header image is “not working”.
You should see the image (the “Rebecca Purple” colour) appear at the very top of your website.
I’m waiting… please do this and report back.
Hi George,
Sorry if it seems like I’m not listening.. I’m just new to wordpress so I’m still trying to get the hang of it. I’ve done as you suggested and yes I do see the image at the top of the website.
See:
Now there are many ways to fix this, but the easiest way is to fix the IMAGE itself.
1) Crop the superfluous whitespace from the top and bottom of your image!
2) Decide on how high you want this HEADER section of your website to be (anything between 100 and 200px should be fine), and resize the whole image so the HEIGHT of the image matches the HEIGHT you want your header to be.
3) Upload this new header image.
We’ll have to do some minor CSS adjustments, but first, do the above and report back so I can check and suggest further refinements.
Thanks George, I have made the image much smaller and it does display above the menu now, though not quite correctly and I’d like it to be quite a bit larger if this is possible. Is there any way I could increase the available space for the header image? Thanks again.
Is there any way I could increase the available space for the header image?
Sure, that’s the “minor CSS adjustments” I mentioned in my previous post 😀
Try adding this to your Additional CSS section:
#site-header.medium-header .top-header-wrap {
height: 134px;
}
(Note that the 134px above is the height of your latest uploaded image. You can increase the height of the image as desired, re-upload, and increase the above CSS height accordingly.)
Still hanging in here to help with further refinements as desired.
Thank you very much! That will work perfectly. 🙂 Sorry for taking up your time. Much appreciated.
You’re welcome!
I’m not a designer, but…
Please note that the middle section in the screenshot below is where your website’s content will start and end.
You could, if you desire, shift your logo a little bit to the right (leaving some white space on the left)
You can accomplish this by EITHER:
1) Adding the desired whitespace on the left of the image itself before uploading (that’s why I actually asked you to crop just the TOP and BOTTOM of your image, but it looks like you cropped the LEFT as well)
2) OR Use CSS to shift the background image a bit to the right.
In fact, I would take off the slogan from the logo, and write is as a bold banner headline text to the right of the logo… something like this:
(As I said earlier, I’m not a designer… so trust your own judgement!)
