CSS-使所有内容适合div，中心背景图像

Question

As shown in the screenshot, there are contents inside a div element which has a background image. This div container is set to have height: 40% of its parent, I believe it is <ion-content> in this case. Now, the image and the text underneath are cropped. I want to make them fit inside the div container. The background image is also not centered in the div .

1. How can I style it such that all the contents can be displayed?
2. How can I center my background image both vertically and horizontally?

It somehow works if I make the browser viewport narrower as shown below. However, I would like to have everything displayed and the background image centered both vertically and horizontally regardless the width of the viewport.

---

HTML

<div style="height: 40%; overflow: hidden;">
    <div class="user-profile">
        <div class="user-profile-background"></div>
        <div class="user-profile-content">
            <div class="row" style="height: 100%;">
                <div class="col col-center">
                    <div class="row">
                        <div class="col col-33 col-offset-33">
                            <div style="height: 0; border-radius: 50%; background-image: url('img/ionic.png'); background-repeat: no-repeat; background-size: cover; background-position: center center; padding-top: 100%;">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col" style="text-align: center; color: rgba(200, 200, 200, 1);">
                            <h3 style="color: white;">Seraph Cheng</h3>
                            <p><strong>Male, 28</strong></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.user-profile {
    position: relative;
    width: 100%;
    height: 100%;
}

.user-profile .user-profile-background {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url('../img/basketball.jpg');
    background-size: cover;
}

.user-profile .user-profile-content {
    position: relative;
    z-index: 2;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

---

Edit

Added a CodePen link to illustrate my problem.

Answer 1

The problem is the background-size: cover css rule. You can test the difference between cover and contain here: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

It's fully compatibility with latest browsers: http://caniuse.com/background-img-opts

Try this:

.user-profile .user-profile-background {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url('../img/basketball.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Answer 2

You can set an explicit height for the background image for example height = 350px and set center center as the position property where you have specified the background image. This way the height will remain fixed but as the view port is reduced, the background image will start cropping from left and right sides ie it would remain in the center. Then on smaller view port, you can reduce the height to say 250px .

Answer 3

HTML

<div class="root">
  <div class="subroot">
    <div class="container">
      <div class="square bg"></div>
    </div>
    <div class="passage">
      <p>Hello world!</p>
    </div>
  </div>
</div>

CSS

.root {
  width: 70%;
  margin: auto;
  border: 2px solid yellow;
  background-image: url('http://baconmockup.com/600/400');
  background-size: cover;
  background-position: center;
}

.subroot {
  background-color: rgba(0, 0, 0, 0.7);
}

.container {
  border: 2px solid black;
  width: 100px;
  margin: auto;
}

.square {
  border: 2px dotted red;
  padding-bottom: 100%;
}

.bg {
  background-image: url('http://placehold.it/200x300');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}

.passage {
  border: 2px dotted green;
  width: 80%;
  margin: auto;
  text-align: center;
  white-space: nowrap;
  overflow: scroll;
  color: white;
}

Problem solved.