- This topic has 6 replies, 2 voices, and was last updated 7 years, 8 months ago by Puro Support.
Tagged: background image header
- AuthorPosts
- February 15, 2017 at 11:36 pm #5950
shreddieParticipantA while ago, Andrew helped me with Custom CSS for adding a Header background image. I tried replacing it with a new one, but it doesn’t scale properly. It is currently 1080×216. When the window shrinks, rather than scaling, the image is truncated.
I need to know what size to create the image, so that it properly fits/scales on the various screen sizes that I need to support (desktop browser, tablets, phones…)
And is there anything else I need to do to get it to behave responsively?
Thanks,
BruceFebruary 16, 2017 at 12:41 am #5952
Puro SupportKeymasterHi Bruce, thanks for reaching out. Could we see the problem in action? Do you have a link? You can use the Set as private reply checkbox below to keep things private.
February 16, 2017 at 12:46 am #5953
shreddieParticipantThis reply has been marked as private.February 16, 2017 at 1:07 am #5954
Puro SupportKeymasterThanks, please, could you try adding this image as your logo and removing the related Custom CSS, I’ll try adjust from there.
February 16, 2017 at 1:13 am #5955
Puro SupportKeymasterOnce the background is added to the logo setting, add the following Custom CSS:
.site-header { line-height: 0; padding: 0; } .site-header .site-branding { padding-right: 0; } .site-header .site-branding img { margin-top: 0; } #site-navigation { display: none; } @media (max-width: 768px) { .site-branding { float: none; } }
February 16, 2017 at 2:33 am #5956
shreddieParticipantOK, changed. It seems pretty good! Thanks!!
Bruce
February 16, 2017 at 2:58 am #5957
Puro SupportKeymasterGlad that helped. All the best 🙂
- AuthorPosts
You must be logged in to reply to this topic.