Uploading an image to a CSS stylesheet

Hi, All.

I'm working on a site template that has a slideshow on the homepage: https://www.showaterloo.org/home.php.

This is the CMSB code:

<?php foreach ($homepageRecord['main_slides'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" width="100%">

          info1 (Slide Text) : <?php echo htmlencode($upload['info1']) ?>
          info2 (Slide Link) : <?php echo htmlencode($upload['info2']) ?>

<?php endforeach ?>

Here's the page code that refers to the slide image:

<div class="single-slide-item slide-bg1">
      <div class="slide-item-table">
                <div class="slide-item-tablecell">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="slider-heading">
                                    <h2 class="slider__title"><?php echo htmlencode($upload['info1']) ?></h2>
                                    <a href="<?php echo htmlencode($upload['info2']) ?>" class="theme-btn">Learn more</a></div>
                            </div><!-- col-md-7 -->
                        </div><!-- row -->
                    </div><!-- container -->
                </div><!-- slide-item-tablecell -->
            </div><!-- slide-item-table -->
        </div>

And this is in the stylesheet:

.slider-area .slide-bg1 {
	background-image: url(../images/slider1.jpg);
}
.slider-area .slide-bg2 {
    background-image: url("../images/slider2.jpg");
}
.slider-area .slide-bg3 {
    background-image: url("../images/slider3.jpg");
}

Can someone explain how I can adapt this code so that the image gets pulled from the stylesheet, please?