width on element and z-index

Question

I am just playing a little bit around with a landing page.

I just set a red opacity background on "A CATCHY PIECE OF TEXT".

• How do I set the width on that the correct way, so I also have the responsive part in mind?
• How can I get the font in front, and the red background in the back?

  #cathyText { background-color: red; padding: 10px; opacity: 0.1; } 

  <h2 class="text-center" id="cathyText">A CATCHY PIECE OF TEXT</h2> 

Answer 1

use rgba() for background color

#cathyText {
    background-color: rgba(255,0,0,.1);
    padding: 10px;
    /* opacity: 0.1; */
    z-index: auto;
}

Answer 2

How can I get the font in front, and the red background in the back?

Use rgba() :

#cathyText {
    padding: 10px;
    background: rgba(255,0,0,0.3);
    z-index: 1;
}

The reason it works is the first 3 numbers set the red-green-blue of the color, and the last sets the opacity.

If you want to center your <h2> element, one way is to place it in a wrapper and change the display to inline-block :

 #cathyText { background-color: red; padding: 10px; background: rgba(255,0,0,0.3); width:200px; display:inline-block; } .catchy-text-wrapper { width:100%; text-align:center; } 

  <div class="catchy-text-wrapper"> <h2 class="text-center" id="cathyText">A CATCY PEICE OF TEXT</h2> </div>