What is the right way to add background Image in HTML and CSS?-CodePudding

So I have been trying to add background image in one of my webpage, I am putting the right link of the URL still the image is not showing up.

<!DOCTYPE html>html>

<head>
  <title>Know US!</title>
</head>

<body>
  <h1>About Us</h1>
  <pre><h2>Our Mission!</h2><p>
            -To promote spirit of health and fitness around the globe.
            -To induct,motivate and train the youth to undergo rigorous 
             training in various games & sports to preparethem for sporting 
             arenas at both national and international levels.
            -To provide them with state of the art & world class indoor and 
             outdoor facilities for that purpose.
             <h3>Our Vision</h3>
             <p>Our vision is to shape the people into physically and mentally
             healthy and robust individuals irrespective of their age, gender,
             caste or creed.Our vision is to facilitate the youth to persue 
             their individual dreams and aspiration in the field of sports and
             provide them the best possible indoor-outdoor facilities of 
             international standards.</p>
        </pre>

  </p>

  <h3>
    Our Glorious Journey</p>
  </h3>
  <hr />

  <main>
    <div >
      <img src="cri.jpg">
    </div>
    <div >
      <img src="boxing.jpeg">
    </div>
    <div >
      <img src="cri2.jpg">
    </div>
  </main>
</body>

</html>

As you could see I have added the image tag and gave the correct URL still the image is not showing up. What could be the possible reason for that, do let me know

CodePudding user response：

you can set the style like following

<main>
    <div ></div>
    <div ></div>
    <div ></div>
</main>
<style>
    .box{
         background-size:100%;
     }
     .back1{
        background-image: url(cri1.jpg);
     }
     .back2{
        background-image: url(boxing.jpeg);
     }
     .back3{
        background-image: url(cri2.jpg);
     }
</style>

Check and enjoy with it.

CodePudding user response：

There are many ways in which you can add a image in the html but the one that is most suitable is; code in alt will be displayed when you don't have that particular image in your files. At that time the user will see this text written over their.