I have put in a fair amount of effort searching through Google and attempting to troubleshoot the issue on my own, but despite my limited knowledge, I am unable to determine how to properly scale my image using bootstrap.
Essentially, I have two flex boxes positioned next to each other: one is intended to showcase the image while the other displays a checklist of items. Each column takes up 6 spaces for even distribution. However, I am facing difficulty in scaling down my image as it appears zoomed in from the background image that I have included.
This snippet shows the code I am working with:
<!--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">
Below you can see the CSS code I am employing for styling the image:
.about-picture{
background: url(../VScode/images/background.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
Any assistance regarding this matter would be highly valued! Thank you!!