Border and background images continue to be popular design elements when building websites. Using the right background images can add personality and style to your site without spending time and money on custom graphics. And borders are useful for adding structure to your contents.
Today we are going to bring these two things together 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 blending modes in all sorts of creative ways.
Let's start.
What you need to get started
To get started, you need the following:
- Le Divi theme installed and active
- A new page created to build from scratch on the front-end (visual constructor)
- Images to use for contents fictitious
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'll 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 photo of a landscape, a bouquet of flowers, or a high tower. Here are some images I am using for this tutorial.
# 2 use gradients and transparency with the borders of the background image
Background images can sometimes be a great border on their own for your contents. But most of the time you'll want to add overlays to your background image to achieve color or to make backgrounds darker or lighter. Background gradients are a great way to add layering to your background images and create unique border designs.
# 3 Use the merge modes
Using blend modes on your background images can apply unique colors and textures to border patterns. All you need to do is 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 great blending modes for background image borders.
Use rounded corner options for unique shapes
Not all borders need to have straight edges. Mix it up a bit! Rounded corner options 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 movement. Additionally, if you use background images with parallax for your border designs, you can create subtle movement that stands out and makes your content stand out.
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 features a narrow background image border with an area shadow to make it look more like a frame for the content.
Here's how to design it.
First, add a row of two columns to a regular section.
Add Summary Module
Then add a blurb module in the left column.
Once the blurb is in place, open blurb settings and extract the default image so that only the title and body content is visible.
Then give your text a white background.
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 background image to 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 row settings, then the settings for column 1 and add the following background:
- Background image: [upload the image of your choice]
- Background color: #303a7a
- Mixture Background Image: Brightness
Then update the rounded corners and the 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 design, we are going to add the blurb text to column 2 of the same row that contains design # 1. Go ahead and copy design layout module # 1 and paste it into column 2. 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 background image to 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%
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 image border pattern with soft colors.
Final result
Discover the final result of the design.
Latest thoughts
Creating borders with pictures is an easy way to add beauty and personality to your design. The design highlighted in this tutorial are made to highlight the possibilities available with Divi in the design of unique borders. Therefore, with the diferent color combinations, the designs are limitless. So, get some images and explore more the design of borders with images on Divi.
Cheers.
