Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Responsive image in half-page-carousel template

srjrol pro asked 7 years ago

Hello,

I am working off of the half-page-carousel freebie template and I would like to know if it is possible to keep the background images used in the carousel slides centered vertically.  This way when you resize the page it shows the full image but at different sizes instead of soemetimes filling the slide with different parts of the image...

For example, in the default template example below, when I view at at 2560x1440 I can only see the tops of the mountains in the first carousel slide.  Only when i resize the page to a smaller height can I see the lake and bottom portion of the background image.

https://mdbootstrap.com/previews/freebies/half-page-carousel/index.htmlThanks!

Jakub Strebeyko staff answered 7 years ago

Hi srjrol, For best of my knowledge there is no better way of "keeping the bottom", unless you're ready to loose some of fluidity for that purpose, by for example removing background-size: cover; property and having the bottom visible all the time, yet exposing the grayed-out sides on higher width. With Best Regards, Kuba

Marta Wierzbicka staff answered 7 years ago

Hi,

add this CSS property background-position: center center to the .carousel-item active view hm-black-light" and this should work.

Best,

Marta

srjrol pro commented 7 years ago

Thank you this definitely improves the function for my purpose. I do still see slighly more of the image appear as I reduce the horizontal size of the page but it is much improved from before. Unless you have any additional thoughts on how to keep the entire bottom of the image visible I think this solution is sufficient for my needs. Here you can see the improvement this background-position code made: <a href="https://ibb.co/gsEk4m" rel="nofollow">https://ibb.co/gsEk4m</a> Here you can see the difference that still exists with different sizes (more of the rock visible on the left version): <a href="https://ibb.co/c9Kk4m" rel="nofollow">https://ibb.co/c9Kk4m</a>

Marta Wierzbicka staff answered 7 years ago

Hi, could you provide any demo or files with your code to let me check your code and try to find a solution? Best, Marta

srjrol pro commented 7 years ago

This is not my code, it’s yours. Please see the template you provide through the freebies section here: https://mdbootstrap.com/previews/freebies/half-page-carousel/index.html

FREE CONSULTATION

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

Closed

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
srjrol
Pro User 0Support score
2Questions 0Answers 0Snippets