Brizy WordPress And Brizy Cloud

Cover, Contain, Auto & Repeat Options for Block Background

We’ve added a feature to the blocks in the Brizy builder over the last few months. That allows you to bring in images to the background that you can set to contain or auto, and with that you can also set it to repeat. Let’s look at how that works access the settings in the top right hand corner, and then we go to background now by default, as you are used to you’re going to see that when we bring in an image and i’m bringing in a pattern here at 300 by 300 pixels, it’s going to stretch it to the entire width and height of that block. We are bringing it into and that’s because the size automatically sets it to cover.


Now in this case, it looks horrendous because it’s a 300 pixels by 300 pixels and, of course you won’t do that. But what I want to achieve here is by using this image. I want to repeat it in the background as a pattern and that you can do by going to size, and then you have contain an auto question. What is the difference between these two contain is going to still stretch it but to the height of the block. So, as I drag around the padding here and i increase the height of this block, you will see that the image will also stretch along with that height.


That is basically the function when you set it to contain now. You will also observe that there is the repeat option and that when activated will repeat it and create this nice background for you, this is great, where you have a pattern that you want to repeat only on the horizontal plane, so you want to keep the height The same, but you want to repeat it to the left and the right: let’s deactivate it to take it back to the contained setting and then put it on auto now with auto, it is going to bring it in at the pixel value of the actual image which is 300 pixels by 300 pixels, and now I can go to repeat, and we get this kind of effect. Of course, this doesn’t work because your text and everything in the content boxes will get lost. This is where we get a little bit creative, so, instead of just using the pattern, as is we add an overlay to it, go over to our overlay section and I’ll use the same orange, but what I’ll do now I’ll grab my opacity slider slightly bring it a little bit down from here, I will definitely go and change the color of my elements so that it can contrast the background and make it more easier to see very quickly. We can do that for more videos as to the elements and features and upcoming updates within Brizy WordPress and Brizy Cloud.