bootstrap paragraph under image-CodePudding

I have a div with background image (SVG). I'm trying to make Bootstrap behave as if that background did not exist and be responsive as it should be, with that being said I want to write stuff over that background as if it wasn't there.

What the expected outcome here is that "test" is written over the background, not under it.

What am I missing?

.firstsection {
  height: 70vh;
  background-image: url(https://via.placeholder.com/1200);
  background-size: cover;
}

.text {
  font-size: 50px;
  color: red;
}

.secondsection {
  height: 30vh;
  background-color: #151519;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <p>test</p>
      </div>
    </div>
  </div>
</div>

<div >

</div>

CodePudding user response：

It's because the parent element has a background-image meaning if you nest the text in the div with a background-image, it will go right over top. You can close the div with the background and start your container and row after that div.

I added a dummy image to demonstrate.

.firstsection {
  height: 70vh;
  background-image: url(https://dummyimage.com/600x400/000/fff);
  background-size: cover;
}

.text {
  font-size: 50px;
  color: red;
}

.secondsection {
  height: 30vh;
  background-color: #151519;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div ></div>
<div >
  <div >
    <div >
      <p>test</p>
    </div>
  </div>
</div>
<div ></div>

If you want to keep relatively the same markup, remove the image from the background, and use the img tag. Then you can add the flex-column class. Then, to get it the same as the background image you can specify width: 100%; on the img. Finally, add margin: 0; to the body element, so it appears full-width as a background image would.

.firstsection {
  height: 70vh;
  /*background-image: url(background.svg);*/
  background-size: cover;
}

.text {
  font-size: 50px;
  color: red;
}

.secondsection {
  height: 30vh;
  background-color: #151519;
}

img {
  width: 100%;
}

body {
  margin: 0;
}

<div >
  <div >
    <div >
      <div >
        <img src="https://dummyimage.com/600x400/000/fff">
        <p>test</p>
      </div>
    </div>
  </div>
</div>

<div >

</div>

Edit ~ made it so the text was on top of the background image.

.firstsection {
  height: 70vh;
  background-image: url(https://dummyimage.com/600x400/000/fff);
  background-size: cover;
  background-position: center;
}

.text {
  font-size: 50px;
  color: red;
}

.secondsection {
  height: 30vh;
  background-color: #151519;
}

<!-- your index file should be structured like so -->
<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div >
    <div >
      <div >
        <div >
          <p>test</p>
        </div>
      </div>
    </div>
  </div>

  <div >

  </div>

</body>
</html>