Deutsche version

With the CSS properties 'background', 'box-shadow', 'border-image' and 'filter' it is relatively easy to create backgrounds for text centered on images that are eye-catching.

In this short article, I'll show you five examples of this type of text background.

A Few Words about the Approach

For the different text backgrounds, I just use CSS Flexbox without z-index and without the pseudo elements ::before.

You can view, edit, modify or download all the code on codepen.io.

The HTML Code

The basic HTML structure looks like this:

<div class="box-flex bg-flowers">
  <div class="box-content box-radial">
    <p class="text-caption">Some text with detailed informations<br>
      <span><small><i>Some more text</i></small></span>
    </p>
  </div>
</div>

CSS Explained

I get the background effect via styling with the CSS properties background, box-shadow, border-image and filter.

The text backgrounds are colored with linear or radial gradients.

The CSS property box-shadow makes the text background stand out from the background image.

The CSS filter drop-shadow enhances the special effects.

In three examples, I also apply the CSS property border-image to “attach” the text backgrounds to the image background.

Below I show you five examples of background effects that highlight key text messages.

You can view, edit, copy and customize the entire code for your needs on codepen.io.

And what about backdrop-filter?

Unfortunately, neither the Firefox browser nor Internet Explorer 11 support the CSS backdrop-filter property (Status: June 2021); this only affects around four percent of all users worldwide, but they also want to be taken into account. Therefore, I do not use this feature here.

1. Example with 'background: radial gradient'

2. Example with an Additional Background Image

3. Example with a 'Screwed' Background

The screws are 'screwed' into the four corners as border-image.

4. Example with a 'Pinned' Background

The pins are 'pinned' into the four corners as border-image.

5. Colored Example with an Enamel Sign Effect

Screwed on like example no. 3 this pattern looks like an shield made from enamel fixed on a wall.

Get the whole code on codepen.io.

That's it for this time. Have fun developing and applying the examples!

Links

The following generators help you to create awesome backgrounds for your key messages

Generators for box-shadow:

cssgenerator.org and cssboxshadow.com

Generators for CSS filter:

cssfiltergenerator.com and cssgenerator.org

Generators for CSS gradients:

cssgenerator.org and html-css-js.com

And here comes a generator for glassmorphism (but with backdrop-filter)

glassmorphism.com

Background image from example 2: Matthew Priest auf Pixabay