CSS background image gets pushed down by texts-CodePudding

I'm wondering why the background image is behaving in this way even though I set the image as a background image in CSS:

In my HTML file, for the location section, the only content I have are paragraphs. However, the text does not appear above the background image.

I have never encountered this issue before. Would appreciate it if anyone can point out any possible cause of this.

HTML and CSS code snapshots are shown below.

.Location {
    background-image: url("https://images.pexels.com/photos/586744/pexels-photo-586744.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width:90%;
    height:500px;
    margin:0 auto;
    color: white;
}

<div > 
    <article>
        <p>Downtown</p>
        <p> 384 West 4th St</p>
        <p>Suite 108</p>
        <p>Portland, Maine</p>
    </article>
</div>

CodePudding user response：

If your goal is to set an the <article> element in the image:

.Location article {
  //set position relative to its parent container in this case <div >
  position: relative
  //positions element on top of div
  z-index: 1;
  //positions it in upper left corner
  top: 0;
  left: 0;
}

Hope you found this helpful :)

CodePudding user response：

this should work unless there are other styles affecting your code

see codesandbox