Looking for a way to apply a separate z-index to 2 background images-CodePudding

I am trying to recreate an image that has text partially hidden behind a mountain range.

I have separated the sky and the mountains into 2 images, but can’t figure out how to apply z-index to each image individually.

Here is my CSS:

.background-hero {
  background-image: url("images/sky2.png"), url("images/foreground2.png");
  /* background-position: left top, right bottom; */
  background-repeat: no-repeat, no-repeat;
}

.hero-text-top {
  width: 440px;
  font-size: 100px;
  font-family: "Bebas";
  font-weight: 300;
  color: #4d4d4d;
  line-height: 1.079;
  text-align: left;
  position: absolute;
  left: 380px;
  top: 262px;
}

And the HTML:

  <body >
    <h1 >LOSANGELES MOUNTAINS</h1>
  </body>

The photo is of the desired effect.

Any help appreciated!

CodePudding user response：

You would usually overlay the foreground image as a separate element in the DOM.

In this case, a div with the background image would suffice. Be sure to apply some css rules to have position the element over the other elements using position:absolute

.background-hero {
  background-image: url("https://placekitten.com/500/501");
  background-repeat: no-repeat, no-repeat;
  width:100%;
  height:100%;
  position:absolute;
}

.hero-text-top {
  font-size: 100px;
  font-family: "Bebas";
  font-weight: 300;
  color: #4d4d4d;
  line-height: 1.079;
  text-align: left;
  position: absolute;
}

.background-hero-foreground {
  position: absolute;
  background-image: url("https://onlinepngtools.com/images/examples-onlinepngtools/clouds-transparent.png");
  width: 500px;
  height: 500px;
  background-repeat: no-repeat, no-repeat;
  background-size: cover;
  background-position: top;
}

<div >
  <h1 >LOSANGELES MOUNTAINS</h1>
  <div > </div>
</div>

CodePudding user response：

Use z-index with position:absolute I'm using div's but the relevant divs can have their own backgrounds.

container {
  position: relative;
  height: 300px;
  width: 400px;
  overflow: hidden;
}

.box {
  position: absolute;
  color: cyan;
}

.box1 {
  height: 300px;
  width: 400px;
  background-color: blue;
  z-index: 1
}

.box2 {
  height: 300px;
  width: 400px;
  top: 90px;
  font-size: 2em;
  font-weight: bold;
  white-space: wrap;
  z-index: 2;
  text-align: center;
}

.box3 {
  height: 150px;
  width: 400px;
  top: 160px;
  background-color: brown;
  z-index: 3
}

<html>

<head></head>

<body>

  <div >
    <div >
      <p>I'm Sky</p>
    </div>
    <div >
      <span>THIS IS TEXT <br />BEHIND A MOUNTAIN</span>
    </div>
    <div >
      <p>I'm a Mountain</p>
    </div>
  </div>
</body>
<html>