- This topic has 8 replies, 2 voices, and was last updated 5 years, 7 months ago by tagadose.
-
AuthorPosts
-
January 27, 2019 at 4:37 am #164482tagadoseParticipant
New install of Catch themes. Tried both audioman and fullscreen Free, but same result. The background image appears well on desktop, but on other devices it is showing zoomed in. Tried different settings like “Default”, “Fit to Screen”, “Full Screen”, etc with and without Scroll with Page option, but no help. Do I need additional ccs script to fix this?
Website: http://www.justinmagnaye.com
I appreciate the help. Thank you.
January 28, 2019 at 1:25 am #164528SkandhaParticipant@tagadose: This is due to the
object-fit:cover
css code.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.@media screen and (max-width:767px) { .has-header-image .custom-header-media .wp-custom-header img, .has-header-video .custom-header-media .wp-custom-header video, .has-header-video .custom-header-media .wp-custom-header iframe { object-fit:fill !important; } }
Let me know if this is what you want!
Kind Regards,
SkandhaJanuary 30, 2019 at 3:52 pm #164838tagadoseParticipantThank you, but the height did not adjust accordingly.
January 30, 2019 at 11:37 pm #164862SkandhaParticipant@tagadose: For that
Go to => Appearance => Customize => Additional CSS and add the following Code..custom-header { height:100vh; }
Let me know if this works out!
Kind Regards,
SkandhaJanuary 31, 2019 at 10:46 pm #164930tagadoseParticipantdid not make any change, as if additional css did not contain any script.
February 1, 2019 at 1:08 am #164943SkandhaParticipant@tagadose: Use the following code instead of the previous one I provided you.
.custom-header { height:100vh !important; }
Let me know if this works out!
Kind Regards,
SkandhaFebruary 1, 2019 at 1:38 am #164947tagadoseParticipanti still need the @media script, right? i changed the height to 55vh and the background image is still stretched (not properly resized according to screen).
February 3, 2019 at 11:28 pm #165076SkandhaParticipant@tagadose: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
@media screen and (min-width:480px) { .custom-header { height:55vh; } }
Let me know if this works out!
Kind Regards,
SkandhaFebruary 5, 2019 at 7:57 am #165174tagadoseParticipantthanks, but i just took out all the css as nothing seems to work.
-
AuthorPosts
- The topic ‘Background Not Fitting Well’ is closed to new replies.