DEV Community

Cover image for CSS text background
Cornea Florin
Cornea Florin

Posted on

CSS text background

Hello fellows developers,

As a CSS enthusiast I'm always trying to replicate designs I see using CSS.

Today I wanted to create a text background for a paragraph.
I used codepen as always(God Bless Codepen).

At first I added the necessary HTML I knew I wanted on the page:

<section>
  <span class="text-background">2021</span>
  <p>
    “Do the hard jobs first. The easy jobs will take care of themselves.”
Dale Carnegie
  </p>
</section>
Enter fullscreen mode Exit fullscreen mode

Now I want my section to be centered on the screen, a dark background and some nice visuals for the body and for that I've added some CSS:

body {
  margin: 0;
  height: 100vh;
  width: 100%;
  background: #454545;

  display: grid;
  place-items: center;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

For my particular design I want to have all the elements centered so I need to center everything inside the section also:

section {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

The relative positioning will help me center and arrange the elements inside without having to mess with z-index(do to the fact of html elements order).

Display grid and Place-items center will center the items inside the section.

And the last and most important thing to do is to add position absolute to our text elements and some styling to look nice:

.text-background {
  position: absolute;
  font-size: 142px;
  color: #3d3d3d;
}

p {
  position: absolute;
  font-size: 20px;
  color: #eee;
}
Enter fullscreen mode Exit fullscreen mode

The final result:

Thank you for reading this article and I'm curios if you have another method to achieve this result.

Top comments (0)