Step-by-Step Guide: Overlaying Text on Background Image in Bricks Builder


Introduction to Overlaying Text on Background Image

Overlaying text on background images is a powerful design technique that merges textual content with visual elements to create captivating compositions. By strategically placing text atop images, designers can emphasize key messages, enhance visual appeal, and reinforce brand identity effectively. This technique is crucial for guiding viewer attention, conveying information, and creating memorable designs across various platforms and mediums.

Step 1: Accessing Bricks Builder

Logging in to Your WordPress Account

Open your web browser and navigate to the login page of your WordPress website. Typically, the URL is Enter your username or email address associated with your WordPress account in the provided field. Input your password in the designated password field. Click on the “Log In” button.

An image showing the WordPress login page with spaces for username and password entry.

If the credentials you entered are correct, you will be redirected to the WordPress dashboard, where you can manage your website’s content, settings, and other features.

Creating a New Project on a page

A screenshot of the process to add a new page in WordPress. The interface shows the necessary steps and options to create a new page.

Step 2: Adding a Background Image

Uploading Your Desired Background Image

Within that section, go to the “Background” settings.

Choose an Image. Set the “Background Position” to “Center Center”.

Container settings page with highlighted background color.

Adjusting Image Size and Position

Adjust the “Background Size” to “Cover”. Then background position to “Center center”

Settings menu: Background position section. Customize image placement.

Step 3: Adding Text Overlay

Selecting the Text Tool

Include a “Heading” element, Enter the name of your first “Heading”. Then, go to the “Style” tab, and in the “Layout” settings, adjust the bottom margin to 8.

Typing and Formatting Your Text

Navigate to the “Typography” section.

Back to the tutorial. So you are in the Typography section. Pick a color, and then set the “Font Size” to 18px.

Choose a font that is clear, legible, and aligns with the overall style of your website or brand.

Ensure that the text is large enough to be easily readable, even on smaller screens or when screen is viewed from a distance.

Step 4: Adjusting Text Overlay

Changing Text Color, Size, and Font

Add another “Heading”. Enter the name for this “Heading”. Then, choose “H1” as the HTML Tag.

Go to the “Style” tab, then “Layout.” Set the bottom padding to 16.

Now, go to the the “Typography” section. Choose a color, and font. Then, set the “Font Size” to 62px, and adjust the “Line Height” to 1.2 for the heading.

Settings menu in WordPress editor: Customize your website's appearance, plugins, and user preferences.

Positioning Text Overlay on the Image

Now, to make the “Heading” more readable and attractive. Let’s apply “Custom CSS” to the 2nd heading.

A highlighted CSS file in the editor.

Then, add a “Basic Text” element. Enter something in “Content tab”. Then, go to the “Style” tab. And in the “Typography” section, select the color, and set the “Font Size” to 20px.

Visual of the basic text editing tool in WordPress.

Step 5: Saving and Previewing Your Work

Save button highlighted in browser.

Conclusion and Final Tips

In conclusion, overlaying text on background images is a powerful design technique that can greatly enhance the visual impact and effectiveness of your website or project. By strategically combining textual content with captivating visuals, you can effectively convey your message, reinforce your brand identity, and engage your audience.

Here are some final tips to keep in mind:

Keep it Simple: Avoid overcrowding your design with too much text or complex imagery. Aim for simplicity and clarity to ensure that your message is easily understood.

Balance and Contrast: Pay attention to the contrast between your text and background image to ensure readability. Use contrasting colors and font styles to make your text stand out.

Responsive Design: Test your design across various devices and screen sizes to ensure that the text overlays remain visually appealing and readable on all platforms.

Consistency: Maintain consistency in typography, color scheme, and overall design aesthetics throughout your website or project to create a cohesive and professional look.

Experiment: Don’t be afraid to experiment with different fonts, colors, and text placements to find the combination that best suits your content and brand identity.

Share on Facebook
Tweet this article
Share on LinkedIn
Email this article

More to explorer

Crafting Hero Section in Brizy

Understanding the Importance of a Hero Section Introduction to Hero Sections A hero section is the prominent and visually striking part of