How to create a text paragraph with a background image in Drupal 8 or 9

In this tutorial I will show you how you can create a reusable text paragraph type which can use any image as background.
Robert Roose
Door Robert Roose

How to create a text paragraph with a background image in Drupal 8 or 9

First you need to install and enable the following modules:

Learn how to install a module for Drupal 8 or 9.

  • Navigate to Stucture > Paragraph types
  • Click on + Add paragraph type
  • Fill in the label with a logical name for your paragraph with image background. This will be shown when adding new paragraphs of this type. ‘Text with image background’ for example. Optionally you can also enter a description describing what the paragraph does.
  • Click Save and manage fields
  • Click + Add field so we can add an image field where we upload the image we want as use our background.
  • Click - Select a field type - and select Image below Reference.
  • Fill in the label to name the field something that makes sense to you. Such as Background image.
  • Click Save and continue
  • You can leave the Field Settings as is and click on Save field settings.
  • In the next screen you can change values as you please. I always enter a more sensical File directory such as images/backgrounds so the uploaded image are easier to find on the server.
  • Optionally you can disable the Alt field as it won't be needed for the background images.
  • Click on Save settings.
  • Click + Add field so we can add a text field to display over the background image.
  • Click - Select a field type - and select Text (formatted, long).
  • You can label the field anyhow you like such as Text.
  • Click Save and continue.
  • You can leave the Field settings as is and click on Save field settings.
  • On the edit screen I always like to select Full HTML for the Text Format as a default value below the text area. This enables you to make full use of the WYSIWYG editor for your text while creating these type of paragraphs.
  • Click Save settings.
  • Click on the Manage display tab.
  • Select - Hidden - under Label next to the Background image field.
  • Choose Background Image as the Format for the Background image field.
  • Click on the gear icon which should appear on the right hand side so we can determine how the image will be shown as a background.
  • Below Default CSS Settings we see a text area below Selector(s). Here we enter the .paragraph--id--[paragraph:id] so that the background image will only be used for a specific paragraph.
  • Personally I like the background image to be centred so I replace the left under Horizontal Alignment with center and top under Vertial Alignment is also replaced by center.
  • Under Background Size put cover. This ensures the background image tries to cover the text paragraph.
  • Click Update.
  • Select - Hidden - under Label next to the Text field.
  • Click on Save.
  • Now we need to make sure that every paragraph get a css class containing it's own id.
  • Open your favourite FTP/SFTP/SCP application (I use WinSCP) and login to the server where you host your Drupal website. Or navigate to your local Drupal installation directory if you are working within a local environment.
  • If you see a file named index.php you are in the right directory.
  • Navigate to modules > paragraphs > templates.
  • Copy the paragraph.html.twig file to your local hard drive.
  • Navigate back to the root directory containing the index.php file.
  • Navigate to your themes directory by going to themes and select your active theme.
  • Now create a folder called templates if it doesn't exist already.
  • Upload the paragraph.html.twig file from your local hard drive to this newly created templates folder.
  • Open the paragraph.html.twig in the templates folder with your favorite code editor (I use Sublime Text).
  • On line 46 Replace not paragraph.isPublished() ? 'paragraph--unpublished' with not paragraph.isPublished() ? 'paragraph--unpublished',
        'paragraph--id--' ~ paragraph.id.value,
{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished',
    'paragraph--id--' ~ paragraph.id.value,
  ]
%}
  • Save the file. Now we made sure that every paragraph also gets their own id as a class.
  • Now we can add paragraphs of this type. Add content of a type where a paragraphs field is enabled and click on Add text with image background
  • Select an image you want to use as a background for this paragraph.
  • Fill in the text you want to be displayed upon this background.
  • Click on Save.
  • View the node you've just created. If everything is right you should now see a paragraph with a background image with text displayed over it.

It works. But it doesn't really look nice. The text is unreadable and everything it too cramped. Let's fix this.

  • In the Drupal backed navigate to Structure > Paragraph types.
  • Select Manage display under operations for the Text with image background paragraph.
  • Click on the gear icon on the right side of the Background image field.
  • Under color change the value #FFFFFF to a colour you use in your theme. Make sure it's not too dark. I will use #0D77B5.
  • Scroll down and click Update.
  • Click Save.
  • Go back to your theme folder. Either locally or via (S)FTP or SCP.
  • Open your main CSS file. Usually located in /css/style.css
  • Add the following lines of code to this CSS file.
.paragraph--type--text-with-image-background {
	background-blend-mode: multiply;
	color: #fff;
	padding: 2em;
}
  • Save the CSS file and refresh the node where you created the text with background image paragraph.
  • As you can see the result is a lot better.

If you have any questions about this tutorial please let me know by leaving a comment.

P.S: Also dont forget to subscribe to my Drupal newsletter if you enjoyed this tutorial.

More Drupal tutorials

The content of this field is kept private and will not be shown publicly.

Beperkte HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.