How to set text over element with background opacity 0.6?

Question

.c{
    display: flex;
    padding-top: 18em;
    .backgroundDiv{
        background: url("/images/DSC8253.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center ;
        height: 20em;
        opacity: 0.6;
         position: absolute;
         width: 100%;
         z-index: -1;
         
    }
}
.bigText{
    display: flex;
    text-transform: uppercase;
    font-size: 3em;
    font-family: cursive;
    font-weight: 600;
    height: 8em;
    top:2em;
}

 <section class="c">
         <div class="backgroundDiv"></div>
         <div class="bigText">
             <p>Pilki-HUILKI</p>
             </div>
     </section>

Have you tried using rbga() colour for the bg instead of opacity? Opacity will change the opacity of the text as well that's in the div, rbga() will only change the background. — Nathaniel Flick, Oct 27 '21 at 19:42
@NathanielFlick this would work with a background image? Which property do you mean should be set with an rgba() value? — Corrl, Oct 27 '21 at 20:03
Are you using a preprocessor because that doesn't look like CSS. However, when I make it CSS the text is over the image OK. Could you describe what you want the outcome to look like? — A Haworth, Oct 27 '21 at 20:20
rgba will set opacity for colot how it suppose to work with image? i use sass yes. there is a git folder with fuul code atm — DeanWinchester88, Oct 27 '21 at 20:22

score -1 · Accepted Answer · answered Oct 27 '21 at 19:45

-1

Here in css file you type like below ( just small change )

.c {
  display: flex;
  position: relative;
  height: 100vh;
}

.backgroundDiv {
  background: url('/images/DSC8253.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 20em;
  opacity: 0.6;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.bigText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  text-transform: uppercase;
  font-size: 3em;
  font-family: cursive;
  font-weight: 600;
}

I use position absolute to make the text over the background then i use transform to make it to the center

answered Oct 27 '21 at 19:45

An in real life

108
2
7

is it a common practice? or just solution for my werid thing?:) – DeanWinchester88 Oct 27 '21 at 20:23
@DeanWinchester88 i work in my company and this way is very popular i recommended you – An in real life Oct 27 '21 at 20:25
thanks. looking to be junior FE.is there any cheat list used for common situations like template for hamburger menu,modal windows and so on? i'm learning building mobile first – DeanWinchester88 Oct 27 '21 at 20:32
Pos absolute takes the icon out of the document flow and thus it doesn't not get the same opacity applied to it like the bg gets (.6). – Nathaniel Flick Oct 28 '21 at 01:54
well or i mde i mistake or it desn't work as expected https://codepen.io/DeanWinchester88/pen/mdMwBJq – DeanWinchester88 Oct 28 '21 at 05:15
hmm i just checked i i saw the text in the center, or you want you text is in the center of a big image right ? – An in real life Oct 28 '21 at 05:36
yeah like this Pilki text in the center of image.would make sense – DeanWinchester88 Oct 28 '21 at 05:49
ok your code i think something went wrong so i use my code pen: you can check here: https://codepen.io/gia-an/pen/rNzwGQM – An in real life Oct 28 '21 at 06:15
aha. i see u put text div INside BG div. and i was following how this guy was doing. https://youtu.be/M3qBpPw77qo?t=355 (@5.55) confused how did it work out for him – DeanWinchester88 Oct 28 '21 at 15:40

How to set text over element with background opacity 0.6?

1 Answers1