background image in section doesn't appear

Issue

I am trying to put an image in the background but it does not appear.I use bootstrap 5 and pure code in css and html, I have look few topic for try to resolve this but i don't know what i need to do

HTML

  <section class="caseservices" style="padding: 4%;">
        <div class="container text-center" href="scrollspyHeading1">
            <h1>MES SERVICES</h1>
            <h3>Des prestations adaptées à vos besoins</h3>
        </div>
        <div class="container text-center" href="scrollspyHeading2">
            <div class="row">
                <div class="col">
                    <div class="row align-items-center">
                        <div class="col-10">
                            <h5 class="text-end">Gestion de projets web</h5>
                            <p class="text-end">Site vitrine, corporate, évènementiel, e-commerce, intranet, application
                                mobile.
                            </p>
                        </div>
                        <div class="col-2">
                            <i class="fa-solid fa-laptop-code fa-2xl"></i>
                        </div>

                        <div class="col-10">
                            <h5 class="text-end">Intégration Web</h5>
                            <p class="text-end">Des intégrations (X)HTML / CSS respectueuses des standards du Web.</p>
                        </div>
                        <div class="col-2">
                            <i class="fa-solid fa-code fa-2xl"></i>
                        </div>

                        <div class="col-10">
                            <h5 class="text-end">Développements spécifiques</h5>
                            <p class="text-end">Des outils adaptés à votre coeur de métier,
                                applications & solutions personnalisées.</p>
                        </div>
                        <div class="col-2">
                            <i class="fa-solid fa-wrench fa-2xl"></i>
                        </div>

                        <div class="col-10">
                            <h5 class="text-end">Référencement naturel</h5>
                            <p class="text-end">Affichage sémantique des informations,
                                des pages propres pour un référencement optimal.</p>
                        </div>
                        <div class="col-2">

                            <i class="material-icons"><img src="images/5902216.png" alt="" style="width: 100%;"></i>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <img src="images/index.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="col">
                    <div class="row align-items-center">
                        <div class="col-2">

                            <i class="material-icons"><img
                                    src="images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png"
                                    alt="" style="width: 100%;"></i>
                        </div>
                        <div class="col-10">
                            <h5 class="text-start">Conception graphique & Webdesign</h5>
                            <p class="text-start">Logos, templates Web, plaquettes publicitaires,
                                cartes de visite, newsletters...</p>
                        </div>

                        <div class="col-2">

                            <i class="material-icons"><img src="images/3938579.png" alt="" style="width: 100%;"></i>

                        </div>
                        <div class="col-10">
                            <h5 class="text-start">Dynamisme des pages</h5>
                            <p class="text-start">Des animations de contenu non intrusives
                                pour embellir votre projet.</p>
                        </div>

                        <div class="col-2">

                            <i class="material-icons"><img src="images/2739572-200.png" alt="" style="width: 100%;"></i>
                        </div>
                        <div class="col-10">
                            <h5 class="text-start">Interface d'administration</h5>
                            <p class="text-start">Outils spécifiques au bon fonctionnement
                                de votre entreprise.</p>
                        </div>

                        <div class="col-2">

                            <i class="material-icons"><img src="images/1027666.png" alt="" style="width: 100%;"></i>
                        </div>
                        <div class="col-10">
                            <h5 class="text-start">Responsive design</h5>
                            <p class="text-start">Compatible tous supports, tablette & application mobile.</p>
                        </div>


                    </div>
                </div>
            </div>

            <p>Compatible Mobile, Tablettes & P.C</p>
            <h3>Développement Web Responsive</h3>
        </div>
    </section>

CSS

.caseservices {
  background-image: url("istockphoto-919065930-612x612.jpg");
}

In this section I tried to put an image in the background so that it doesn't look too empty but it doesn't display I tried to do as in a topic but it didn't work, where is the 'mistake

Solution

I just tried your code and changed your image with one of mine to chek what appens. And it works fine. Maybe you can try to check if the link to your css file is correct or the name of the image is.

Answered By - Dario Pisapia