Move text onto Image CSS/Bootstrap5-CodePudding

I've been trying to get my rows and columns to appear over my background image. I've been struggling with this for a while. Any help would be greatly appreciated!

I am also quite new to this so, if it is simple I've yet to find it XD

<!DOCTYPE html>
<html>

  <head>
    <title>Testing</title>

    <!--CSS-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

    <!--Font Awesome-->
    <script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
    
    <!--Index Stylesheet-->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    
    <!-- JavaScript Bundle with Popper -->
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>

    <style type="text/css">

    </style>
  </head>

  <body>
      <div id="about-us" >
          <a href="https://placeholder.com"><img src="https://via.placeholder.com/1920x618.png" alt=""></a>

          <div >
            <div >
              <div >
                One of two columns
              </div>
              <div >
                One of two columns
              </div>
            </div>
          </div>

      </div>
  </body>
</html>

CodePudding user response：

First you need to change Image path i have changed image path. Give a backgroud-image to parent div in css.

<!DOCTYPE html>
<html>
  <head>
    <title>Testing</title>
    <!--CSS-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <!--Font Awesome-->
    <script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
    <!--Index Stylesheet-->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
    <style type="text/css">
      #about-us{
        background-image: url('https://previews.123rf.com/images/melpomen/melpomen1904/melpomen190400312/120268255-e-learning-concept-with-person-using-a-laptop-on-a-white-table.jpg?fj=1');
      }
    </style>
  </head>
  <body>
      <div id="about-us" >
          <a href="https://placeholder.com"><img src="" alt="" width="100%"></a>
          <div >
            <div  style=" position: relative;">
              <div >
                First Column
              </div>
              <div >
                Second Column
              </div>
            </div>
          </div>
      </div>
  </body>
</html>

CodePudding user response：

You can put image as background for your block using CSS. Inside your style.css file:

#about-us{
  background-image: url('https://via.placeholder.com/1920x618.png');
}

There are also CSS properties to set background image position, size etc. You can find more here