Text isn't overlapping on the background

user_18580731 0
Viewed 52

I'm trying to use two different background colors for different sections of the page. Right now I haven't scaled it appropriately but I'm currently just trying to fix this issue. The issue is that the text doesn't appear over the background, but instead under it.

The expected output is that the text is above the background colors. The actual output is that the text appears below the whole background (Not behind, but below it).

.bg-container {
  min-height: 100vh;
}

.top {
  height: 50vh;
  background: #76a3b1;
  position: relative;
}

.bottom {
  height: 50vh;
  background-color: #fff;
}

.title1 {
  position: absolute;
}
<div class="bg-container">
  <div class="top"></div>
  <div class="bottom"></div>
</div>
<div class="main-page">
  <span class="title1">
            TEXT
        </span>
</div>

css html
3 Answers

The text doesn't appear over the background because you put the text span after the background in your HTML. move the span "inside" the background div, as the following:

.bg-container {
  min-height: 100vh;
}

.top {
  height: 50vh;
  background: #76a3b1;
  position: relative;
}

.bottom {
  height: 50vh;
  background-color: #fff;
}

.title1 {
  position: absolute;
}
<div class="bg-container">
  <div class="top"><span class="title1">
            TEXT
        </span></div>
  <div class="bottom"></div>
</div>

<div class="main-page"></div>

user_178029280

In this case it's much easier to use a linear gradient on the body element, with an abrupt change between color 1 and color 2.

If you want to center the page title, you can do it as in my snippet below. But also without these settings for centering (i.e. if it's not absolutely positioned), the background colors will remain behind it.

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: linear-gradient(to bottom, #76a3b1 0%, #76a3b1 50%, #ddd 50%, #ddd 100%) fixed, no-repeat;
}

.main-page {
  height: 100%;
  position: relative;
}

h1 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<body>
  <div class="main-page">
    <h1>TEXT</h1>
  </div>
</body>

user_56416690

You can add z-index properties to the elements to control which falls in front of the other: https://www.w3schools.com/cssref/pr_pos_z-index.asp

Note that this property only works on positioned elements, but you are positioning the text anyways so that should be fine in your case

user_185591750
Related