Why Does My background Image Break My layout-CodePudding

I am working on a site with a transparent navbar with a background image with some text placed to it. When I tried to add a text under the background image but instead, the text moves to the top left of the page. how can l fix it? here is the code:

.hero-image{
background-image: url('d.jpg'); 
height: 657px; 
background-repeat: no-repeat;
background-size: cover;

} This shows the background image with text at the top left. i want the text to be under the background image

CodePudding user response：

I think you have used position: absolute for this; thats why your text moves to the top. Try to use following code may be it helps:

.hero-image-outer{
  position: relative;
  height: 675px;
}
.hero-image{
background-image: url('https://images.pexels.com/photos/11635509/pexels-photo-11635509.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); 
height: 100%; 
background-repeat: no-repeat;
background-size: cover;
  position: absolute;
  width: 100%;
  z-index: -1
}

<div >
  <div ></div>    
  </div>
<div >Lorem ipsum dolor sit amet</div>