Brick Style Background Patterns in Elementor and CSS

Sure, you can create background patterns quite easily using Elementor backgrounds for sections or containers. Simply upload an image, set it to repeat and use a custom size to scale it down. But what if you want to create a brick-style background pattern? For this, we will need a bit of CSS…

Scroll down to test this effect in an interactive exercise!

How to create brick background pattern in Elementor Pro

First, remove any background image of your section or container in Elementor widget. We will be adding this background image directly in CSS.

If you are using Elementor Pro, go to ‘Custom CSS’ field in the ‘Advanced’ panel of your container or section widget and apply the code below.

selector {
    background-image: url('https://yourwebsite.com/your-image.png'), 
        url('https://yourwebsite.com/your-image.png');
    background-size: 100px 100px;
    background-repeat: repeat;
    background-position: 0 0, 50px 50px; 
}

Don’t forget to replace the URL with your actual image URL! This should be the PNG transparent image of one single pattern sample or pattern tile. You can also change the the background-size to anything you want and set the second set of values in the background-position property to half of that size.

How does this code work?

1. We are setting two background images within the same background-image property. You can say that the first URL is for the the odd rows in the pattern, and the second URL is for the even rows. In our case, this is the same image, so we are using the same URL image source.
2. Background-size is the size of the tile in the pattern. You can change this to anything you want.
3. Background-repeat will create the actual pattern by repeating the tile in both horizontal and vertical direction.
4. Background-position is where the magic happens and what creates the actual brick pattern. By using two sets of values separated by comma, we are defining the shift of the odd rows and even rows. The first two values represent the shift in horizontal and vertical direction of the odd rows. In our case, it is 0,0. The second set of values define the shift in horizontal and vertical direction of the even rows. In our case, half of the tile size, or 50px horizontally and 50px vertically.

How to create this effect with Elementor FREE

If you are using Elementor FREE, you can use the same code with minor adjustments.

First, apply a class to your container or a section. Go to the ‘Advanced’ tab and write the class name in the ‘CSS Classes’ field, without a dot. For example, you can name your class “bg-pattern”.

Don’t know what are CSS classes? Check out the post about CSS classes here.

Next, go to your CSS code – I am using Simple Custom CSS and JS plugin to write my CSS and type the code below. Note that we are using the same code as above, but instead of ‘selector’, we are typing our class name, this time called out with a dot (‘.’):

.bg-pattern {
    background-image: url('https://yourwebsite.com/your-image.png'), 
        url('https://yourwebsite.com/your-image.png');
    background-size: 100px 100px;
    background-repeat: repeat;
    background-position: 0 0, 50px 50px; 
}

Again, don’t forget to replace the URL with your actual image URL! This should be the image of one single pattern sample or pattern tile. You can also change the the background-size to anything you want and set the second set of values in the background-position property to half of that size.

That’s it! Now you’ve successfully created a brick style background pattern with seamless tiles using just a few simple lines of CSS in Elementor.

online course

free 30min consultation

Ready to Learn CSS?

A step-by-step basic online course for beginners and non-coders with 50+ practical exercises to get you started with CSS.

• No HTML
• Interactive
• For non-coders

Enroll now

Try it out yourself!

Try to create this brick background pattern yourself using the interactive CSS exercise below!

Just click on the ‘CSS’ field in the CodePen below and type the CSS there to see the result. You can copy and paste the CSS codes from above and just change the background-size and background-position values to create different scaling effects.

See the Pen Brick background pattern exercise by Anait (@velvetmade) on CodePen.