McDuck4 McDuck4 - 2 months ago 6
CSS Question

width on element and z-index

I am just playing a little bit around with a landingpage. Here's a fiddle of the relevant code.

I just set a red opacity background on "A CATCY PEICE 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?



HTML

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


CSS

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

Answer

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>

Comments