fit width of image for background cover in parent div

Question

with bootstrap 4: I have this code:

I want add a fixed cover background in col-9

<div class="container">
  <div class="row">
      <div class="cpl-3">...</div>
      <div class="cpl-9">
         <div class="parallax" style="background-image: url('pic.jpg');"></div>
      </div>
  </div>
</div>

I use this css code:

.parallax {
    min-height: 300px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

It cover whole documnet. In col-9, I can only see a part of image (for large images)

can I fit width of image with col-9 column?

Answer 1

Unfortunately, Its is not possible as this is how fixed positioning works in CSS.

The reason this happens is due to the combination of background-attachment: fixed and background-size: cover. When you specify background-attachment: fixed it essentially causes the background-image to behave as if it were a position: fixed image, meaning that it's taken out of the page flow and positioning context and becomes relative to the viewport rather than the element it's the background image of.

So whenever you use these properties together, the cover value is being calculated relative to the size of the viewport irrespective of the size of the element itself, which is why it works as expected when the element is the same size as the viewport but is cropped in unexpected ways when the element is smaller than the viewport.

There is a workaround for this, Note that this is not a perfect/clean solution

You can achieve a similar desired result by using a position: fixed; pseudo element:

• Add a new selector .parralax:before with the following rules
  • background-image: url(); - The background image
  • background-repeat: no-repeat; - Stop the background from repeating
  • content: ""; - Required for the pseudo element to show
  • position: fixed; - Set the pseudo element to be fixed relative to the viewport
  • height: 100%; - Make the pseudo element fill the entire height
  • width: 75%; - Same as the width of the col-9

position: fixed; fixes the element to a set position relative to the viewport. By not setting a bottom, left, right or top position the pseudo element stays where it is originally positioned. The background can them be applied to the element in the usual way.

Note that I renamed cpl to col for the snippet

.parallax {
position:relative;
min-height:300px;
}

.parallax:before {
    content: "";
    position: fixed;
    height: 100%;
    background-image: url(https://placehold.it/1000x1000);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width:75%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
      <div class="col-3">...</div>
      <div class="col-9">
         <div class="parallax" ></div>
      </div>
  </div>
</div>

Answer 2

To make an image fit inside of its parent, you could do the following if you had your image in an <img> tag:

max-width: 100%;
max-height: 100%;

See this stackoverflow post