BlueOwlCreative » Topic: background image not responsive https://blueowlcreative.com/support_wp/forums/topic/background-image-not-responsive/feed/ Wed, 26 Aug 2026 02:03:42 +0000 http://bbpress.org/?v=2.5.3-5249 en-US https://blueowlcreative.com/support_wp/forums/topic/background-image-not-responsive/#post-30087 <![CDATA[background image not responsive]]> https://blueowlcreative.com/support_wp/forums/topic/background-image-not-responsive/#post-30087 Thu, 06 Oct 2016 09:13:45 +0000 quadrocreative Hi Support,

I have a particular background image on my home page (behind the header) that when viewed on any other device than a desktop, the image is cropped so you cannot see the faces of the people. How can I make it responsive so it adapts to any device?

http://www.nextgearpartners.com/

Best Regards,

Richard

]]> https://blueowlcreative.com/support_wp/forums/topic/background-image-not-responsive/#post-30091 <![CDATA[Reply To: background image not responsive]]> https://blueowlcreative.com/support_wp/forums/topic/background-image-not-responsive/#post-30091 Fri, 07 Oct 2016 07:37:36 +0000 BlueOwl Hi there Richard,

The BGR image in your case is responsive. Let me explain what happens here:
The image uses the “cover” background-size property so it always covers the div that it’s set as a background to. In responsive your div gets rather tall so in order to cover it vertically your image cannot scale down, if it did the bottom of the div’s bgr wouldn’t get covered. :)
There’s several options for you.
1. You could create a taller version of the image and set it as a background only for the mobile version with a custom media query that applies to your specific div (target it with a class or ID).

2. Again with media query you could override the backgruond-size property of the div to “contain” for example only for responsive then add a bgr color to fill in the rest of the div.

Good luck!

]]>