Brick Tile Background Patterns in Elementor and CSS | Shift Pattern Rows for Seamless Backgrounds

You can create background patterns quite easily using Elementor backgrounds for sections or containers. You simply upload a background image, set it to repeat and use a custom size to scale it down as necessary.

But how to create brick background patterns? With background or pattern tiles filling the space in between them, so that each other row is shifted to half of the tile size? This creates a much more natural effect.

To do that, we are using some custom CSS and defining our background-image in this custom CSS, not in Elementor.

You should define two URLs within the background-image property. The first one will serve as the background image pattern or a tile for the first set of rows (odd rows) and the second one will be for the second set of rows (even rows). In our case, both images will be exactly the same, so we will use the same URL as the image source.

Then, you will use a background-position property and define two sets of values here. The first set of values will apply to the first set of rows and the second set of values will shift the even rows horizontally and vertically to fill up the spaces between the tiles. These two set of values will be separated by a comma.

💻 Read the blog post, grab the code and try the interactive exercise here:
https://www.cssgamelab.com/2024/12/03...

🚀 Interactive CSS Basics course for designers and non-coders:
https://www.cssgamelab.com/

👉 Get 20% off using the code VELVET20OFF at Checkout.

––––––––––––––––––––––––––––––

PURCHASE AND DOWNLOAD ELEMENTOR PRO to build websites without coding:

https://be.elementor.com/visit/?bta=6...

––––––––––––––––––––––––––––––

Have fun and thanks for watching!

If this tutorial helped you, please share or subscribe.

––––––––––––––––––––––––––––––

This video and description may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale. That way you are supporting my channel and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.

––––––––––––––––––––––––––––––

Have a specific problem in Elementor or CSS that you don't know how to solve? Comment below to let me know which video you would like to see next!

––––––––––––––––––––––––––––––