Skip to Main Content

How to create borders with backgrounds on Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Border and background images continue to be popular design elements when creating websites. Using the right background images can add personality and style to your site without wasting time and money on custom graphics. And borders are useful for adding structure to your content.

Today, we will combine these two assets by designing background images as borders. Divi has a set of useful options for customizing background images, making it easy to design background images for unique border designs. This allows us to combine colors, gradients, box shadows and blend modes in all sorts of creative ways.

Let's start.

What you need to get started

To get started, you need the following:

  1. Divi theme installed and active
  2. A new page created to build from scratch on the front-end (visual constructor)
  3. Images to use for fictional content

After that, you will have a blank canvas to start designing in Divi.

General Tips for Creating Background Image Border Patterns

Before you start building, here are some general tips to keep in mind when creating background image border patterns.

# 1 Choose images with a lot of texture

Most of the time, you will want your borders to be narrower. This means that you will not be able to see much of the image. It is therefore useful to use images that have a lot of texture. For example, you can use a picture of a landscape, a bouquet of flowers, or a tower in height. Here are some pictures that I use for this tutorial.

# 2 Use gradients and transparency with the borders of the background image

Background images can sometimes be an excellent border for your content. But most of the time, you'll want to add overlays to your background image to get a color or to make the backgrounds darker or lighter. Background gradients are a great way to add an overlay to your background images and create unique border patterns.

# 3 Use the merge modes

Using blend modes on your background images can apply unique colors and textures to border patterns. Just add a background color or gradient with your background image, and then select a blend mode for the background image. Color, brightness, multiplication, and screen are some excellent blending modes for background image borders.

Use rounded corner options for unique shapes

All borders do not have to have straight edges. Mix a little! The rounded corner options of Divi allow you to shape these corners creatively.

Use parallax background images as borders

The great thing about parallax is that it brings design to life with motion. Plus, if you're using background images with parallax for your border designs, you can create a subtle movement that stands out and brings out your content.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Background image border design in Divi

Now that we understand the general idea underlying the creation of background image border patterns, let's imagine a few together. We will build 2 different models. Each will have a basic presentation module to serve as fictional content. And we will use the column parameters to add the background image border of the module.

Let's start with our first design.

#1 border background image

This first design has a narrow background image border with a zone shadow to make it look more like a frame for the content.

Here's how to design it.

First, add a two-column row to a regular section.

Add Summary Module

Then add a blurb module in the left column.

Once you have the presentation text in place, open the presentation text settings and extract the default image so that only the contents of the title and body are visible.

Then give your text a white background.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Then update the presentation design parameters as follows:

  • Text Title: Oswald
  • Body Police: Lato
  • Margin 5% at the top, 5% at the bottom, 5% at the left, 5% at the right
  • Upholstery: 7% at the top, 7% at the bottom, 10% at the left, 10% at the right
  • Rounded corners: 20px at the top right, 20px at the bottom left
  • Box Shadow: see screenshot

Add the background image to the column

This takes care of our presentation module. Now let's add our background image border. To do this, we will add a background image to the column containing the Blurb module. Open the line parameters, then the settings in the 1 column and add the following background:

  • Background image: [download the image of your choice]
  • Background color: #303a7a
  • Mixture Background Image: Brightness

Then update the rounded corners and shadow of the box as follows:

  • Rounded corners: 20px at the top right, 20px at the bottom left
  • Box Shadow: see screenshot

Final result

Now, check the final design.

Border background image # 2

This next design highlights the fact that using highly textured images can create beautiful borders, especially when you combine them with image blending modes.

Here's how to design it.

Add the Blurb module

To create the drawing, we will add the presentation text to the 2 column of the same row containing the drawing # 1. Continue and copy the 1 Design Presentation Module and paste it into the 2 column. Then update the presentation module settings as follows:

  • Rounded corners: restore default settings
  • Margin: 10% at the top, 10% at the bottom, 10% at the left, 10% at the right
  • Upholstery: 15% at the top, 15% at the bottom, 10% at the left, 10% at the right
  • Width of the border: 1px
  • Border color: #ffffff

Add the background image to the column

With our module in place, open the line settings and add a background gradient to the 2 column.

  • Left background gradient: #f7e0a5
  • Right background gradient Color: rgba (237,240,0,0.79)
  • Gradient Direction: 90deg
  • Starting position: 50%
  • Final position: 0%

border drawings background image divi

Then add a background image with a nice gradient effect.

  • Background image: [download image]
  • Background image mix: Color

As you can see, the color blend mode preserves the brightness of the two color gradients behind the image to create a nice, soft-colored image border pattern.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Final result

Discover the final result of the design.

Latest thoughts

Creating borders with images is a simple way to add beauty and personality to your design. The design put forward in this tutorial, are made to highlight the possibilities available with Divi in ​​the design of unique borders. Therefore, with the different color combinations, the designs are limitless. So, get some pictures and further explore the border design with Divi image.


This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top