How to set a desire color on text after overlaying color over an image?

Question

I have set an overlaying color on background image and then the text color has been changed. I set text color to white but the color changed after overlaying.

Code:

body {
  background: url(./survey-form-background.jpeg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container {
  text-align: center;
  color: white;
  font-family: 'Poppins', sans-serif;
}

.container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(68, 28, 179, 0.753);
  z-index: 2;
  width: 100%;
  height: 100%;
}

<div class="container">
  <h1 class="heading">freeCodeCamp Survey Form</h1>
  <h3 class="sub-heading"><em>Thank you for taking the time to help us improve the platform</em></h3>
</div>

Image:

I want "White" as the text color of the whole page. How can I do that.

Please help me.

Thank you.

the issue is: `.container::after { z-index: 2; }` it is placed above the text elements layer-wise. — tacoshy, Mar 13 '21 at 18:38
@tacoshy Yes, you are right. I got it and I already posted the answer. Thank you. — , Mar 13 '21 at 18:40

score 2 · Answer 1 · answered Mar 13 '21 at 18:37

I got the solution.

Replace the

.container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(68, 28, 179, 0.753);
  z-index: 2;
  width: 100%;
  height: 100%;
}

with the below code:

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(68, 28, 179, 0.753);
    z-index: -1;
    width: 100%;
    height: 100%;
}

score 1 · Accepted Answer · answered Mar 13 '21 at 18:51

The best way to solve this, is not to use a pseudo-element in the first place. You can use linear gradient befor the background image to color it directly like in the sample below:

body { background: linear-gradient(rgba(68, 28, 179, 0.753), rgba(68, 28, 179, 0.753)), url(./survey-form-background.jpeg) no-repeat center center fixed; }

body {
  background: linear-gradient(rgba(68, 28, 179, 0.753), rgba(68, 28, 179, 0.753)), url(https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container {
  text-align: center;
  color: white;
  font-family: 'Poppins', sans-serif;
}

<div class="container">
  <h1 class="heading">freeCodeCamp Survey Form</h1>
  <h3 class="sub-heading"><em>Thank you for taking the time to help us improve the platform</em></h3>
</div>

How to set a desire color on text after overlaying color over an image?

2 Answers2