javascript - Bootstrap - Scaling Images in a Specific Way

Question

I have tried searching as much as I can through google as well as figuring out the issue myself, but no matter what I try(albeit my knowledge is very limited) I cannot figure out how to scale my image with bootstrap.

Basically I have two flex boxes next to each other, one I want to display the image and the other displays a checklist of items. Each column takes up 6 spots so they are even. The issue is I cannot seem to scale my image down, it is a zoomed in version of my background image that I have added.

This is my code:

<!--about section-->
<section id="about" class="bg-info">
  <div class="container-fluid">
    <div class="row">
      <!--about img col-->
      <div class="col-md-6 about-picture height-80"></div>
      <!--about text col-->
      <div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">

This is what I am using in my css file for the image itself

.about-picture{
    background: url(../VScode/images/background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Any help with this is greatly appreciated! Thank you!!

Answer 1

background-size: cover; will "resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges".

You might want to choose a different background-size (and background-repeat). See: MDN: background-size