Topic: Cover and Background Images Not Responsive on Medium and Smaller Viewports

surface2air free asked 6 years ago

Hi MDBootstrap Support, I am trying to debug two background images for a live project: One - is the Landing Page Cover Image. Borrowing from a free template, the image no longer appears full screen and is not fluid. And it lacks a fluid responsiveness in smaller viewports; the graphic's title text bleeds outside the browser chrome. Would I need to recut the image and run a media query for this class? Two - is the image of the dancer. She appears fine on desktop displays, but gets clipped on smaller viewports. I have tried to use the CSS background-position:left property to try and bring her into view, but that means a resize of the image height. Any help with these issues would be greatly appreciated! The event is approaching soon. Thank you! Eric RE:

Ollie Vincent pro answered 6 years ago

Hi, You could try using background-position:contain; but then it would only respond as per the image size (like a normal image). Thanks

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No