- 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 #164482
tagadose
ParticipantNew 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 #164528Skandha
Participant@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 #164838tagadose
ParticipantThank you, but the height did not adjust accordingly.
January 30, 2019 at 11:37 pm #164862Skandha
Participant@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 #164930tagadose
Participantdid not make any change, as if additional css did not contain any script.
February 1, 2019 at 1:08 am #164943Skandha
Participant@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 #164947tagadose
Participanti 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 #165076Skandha
Participant@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 #165174tagadose
Participantthanks, 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.