Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Does setting a background size of 100% work?
I can’t seem to use a background image for the header that displays, so no, that doesn’t work. The best solution for this would be if the header could remain in it’s position and not shift to the left as the rest of the page content does when the browser is resized.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
This seems to force the header image not to shrink on the demo site:
.site-header { background-position: 0; }
It’s not so much about shrinkage of the header image, but about the image’s left side moving out of sight when the window adjusts for mobile display. The logo I need to keep visible moves out of the frame…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I meant it does not shift.
Thanks for your help Andrew, but this additional code seems to have no effect on stopping my header image from shifting to the left.
I have looked at a variety of posts that seem to involve this issue, but am not finding one that works, or more complex ones I understand.
The header image I uploaded to use has a logo on it’s left side. When the page scales down, that logo part slides to the left and is no longer visible. To make my image the right size for my page, the image is centered within a black background to fit the required width of 1600×230.
I have tried setting the image as a background image for .site-header and/or .site-header .home-link, but it seems that removing the header image in settings and trying to use a background image doesn’t work – no header shows.
Can anyone who has figured this out provide guidance? Many thanks.
Do you have a child theme set up? Posting a link to your site would be relevant.
Yes, I am using a child theme for my custom CSS and php templates. The site is in beta; just getting started: http://drkidbrain.com/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I can’t seem to use a background image for the header that displays, so no, that doesn’t work.
You managed it then? So can you try the background size of 100%?
I had to select an image for the header from Appearance/Header. If I clicked “remove header image” and used a background image in my child theme CSS file no header image was showing.
I have the exact same problem, have you found a solution for it yet? or is it the template that “forces” you to make a logo in the center to make it visible on tablets and phones?
