Card background not centered

Questions
1

Hello, I’d like to know if there’s a way to perfectly center a background on a expandable card.

As you can see here: https://imgur.com/a/3V8wEK9 The cards have a background image but it is not centered in any breakpoint. Just the card at the left when i’m at a hight breakpoint.

Any advice?

2

did you try with flex.

In tipography section on Framework7 web, you got the css for display-flex.

3

Yeah, the problem with expandable cards is that the image is set with <div style="background: uri(image.png)"></div> so I keep having the same problem even if I try to use flexbox

4

try with this

css:

  .demo-card-header-pic .card-header {
  height: 175px;  //size of the div card 
  background-size: cover;
   background-position: center;
  color: #fff;
 }

add class in <div class="card card-expandable>