Robert Roose - Drupal web designer
By Robert Roose

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.
Add paragraph type
  • 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
Add an image field
  • 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.
Background image field 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.
Select Full HTML for this text field
  • 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.
Background image field settings
  • 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,

It should look like this:

{%
  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
Add a text with image background paragraph
  • 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.
Select a background image and fill in text
  • 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.
  • This is how my paragraph looks:
Example of a paragraph with a background image

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 this result is a lot better:
Modified example of a paragraph with a background image

If you have any questions about this tutorial please let me know by leaving a comment. I will try to reply as quickly as possible :)

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

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