Background Image Effects

Elementor (Affiliate Link):
https://wickydesign.com/get-elementor

Video Transcript

Hello everybody! This is Barbara from Wicky Design. Today’s video is going to be all about background images in Elementor. With just a few clicks, you can achieve some really cool effects on your webpages using Elementor’s built in styling tools.

If you like videos like this and you’re learning about web design, be sure to subscribe to the channel and click the bell to receive notifications whenever we post a new video.

Now, let’s get into the video.

The first example I’m going to show you is actually from our website, WickyDesign.com. We used a background image in our call to action area that’s on every page of our website. Adding an image to the background of this area helps draw more attention to it. It’s important to make your call to action areas stand out, so adding a background image to it is one way to achieve that effect of getting it to stand out.

The second example that I’m going to show you is from a site that we designed for a client a few years ago, where we added a background image to the top hero area of every page. This was more of a layout choice. We added these images to help anchor the page and give it a more professional look. We could have used solid colors for this area, but I don’t think that it would have looked as nice. I really like how the images look in the background and how they help describe what each page is about.

The third example that I’m going to show you is actually one of my favorites. This uses a fixed background in a column and it really gives it a cool effect when you scroll down the page. Fixed backgrounds aren’t really new. It’s something that you see in a lot of website designs, but it’s almost always that you see them spanning across the entire page. It’s pretty rare to see them being used in multiple column layouts, but I think it gives it a really unique look and I’m really excited about the way this turned out.

Now that I’ve gone over some examples of how you can use background images in your website designs, let’s get into how to achieve these effects in Elementor.

I’ve created a brand new page on a testing server and I’ve opened that page up in Elementor. We have a blank canvas to work with, so let’s start adding some background images.

The first thing that I’m going to do is add a one column section and then click on these 6 dots and go to the style tab. This is where you will add your background image. You’ll want to click on classic and you’ll see that there is this image option that shows below it. We’ll click here and then we’ll upload a new image. I’m just going to use one that I got from Pexels of these pretty clouds in a sky.

Our background image is in the section, but we can’t really see it because the section isn’t tall enough, so we need to adjust some of the layout settings in order to be able to see it. I’m going to go over to layout and I’m going to change the height. Right now it’s set to default. We can do fit to screen, which will have it take up the entire page or we can do a min height and adjust the slider according to how big or small we want it. I think that looks pretty good.

Now we can go back to our style tab and start adjusting more of the background settings.

The first thing that I’m going to show you is position. Right now it’s set to default, but if you start clicking on these different options, you’ll see more or less of the background shows depending on what you choose.

One thing that I really, really like about Elementor is this custom function. So if you are uploading an image where there is people in it, you don’t want things to be cropped weirdly, so this comes in handy for cases like that because you can adjust the x and y axis to have it show exactly what you want. It’s really useful. Just wanted to show you that, but I’m actually going to pick center center because I like how that looks for this particular image.

The second thing is attachment. Be default the attachment is scroll, so when you scroll down the page, the background goes with you. If this was fixed, it would stay in place and that’s how you get those cool effects like I showed you in my third example where the background image was just on a column. You would pick fixed for that and adjust the way the background shows. When you scroll down, it doesn’t move. It’s a pretty cool effect. I’m not going to use that for this example though. I’m just going to put it back to default.

Repeat – I’m going to select no repeat. For background images, most of the time you don’t want them to repeat because an image shouldn’t be repeatable. If you have a pattern that you’re using as a background, you might want to select repeat for that, but for this particular example, we are just going to select no repeat.

The size is another thing that I’m going to change. I’m going to change it from default to cover. I want the background to be contained within this entire section, so that’s what cover does. There are a bunch of different options available. You can play around with it to get the effect that you are looking for.

Now from here, we can start adding whatever we want to this section. This is just a regular Elementor section. If I wanted to make this a call to action area, I might add a heading and maybe some text underneath that heading, and then finish it off with a button. That’s a common way to use background images, like that first example that I showed you or the second example where it was in the hero area. This is how you achieve effects like this.

Now, looking at this, you probably need to make some adjustments in order for the text to be more readable. We can go back to our style tab and change things around as far as the positioning goes, or we could do a background overlay. So we have background here where we did all of these different effects, but background overlay gives you even more options.

If we wanted to add a background overlay, we could add maybe a color to this to give it a white transparency and you can see it makes it a little more readable as far as the text is concerned. And we can slide this to make it more or less depending on the effect that we were trying to achieve and how our text kind of lines up on the page. So play around with these settings as well because you can really get some great effects depending on what it is that you’re trying to go for. But there’s tons of different options that you can do just by using background any playing with these effects and background overlay. You can do a lot of different things, so play around with it and get some cool effects for call to action sections, for hero sections, stuff like that. This is really useful.

Now that we know how to add background images to entire sections, I’m going to show you how to add them to individual columns in Elementor.

I’m going to load up a 2 column section and instead of going to edit the section, I’m going to edit the individual column. So I’m going to click here, then go to style, and the procedure is still the same. We’re going to go to background, were going to select classic, then were going to load up the background into the column itself.

Now nothing is showing, just like before, because we don’t have any content in here yet, so we have to add some content in order for the background image to show. I’m going to go back to my widgets and I’m just going to add a spacer here. You can add whatever you want into this section. So if you want to add text, you want to add videos, buttons, whatever it is, you can add it. It’s the same as any other column on an Elementor page. I’m going to add a spacer though and just add some space so we can really see what we’re doing. So now we can see more of the image and we can go in and play around with some of these settings again. So I can change the positioning – I’m going to do center center like I did before. That gives a nice effect. I’m going to change the size from default to cover so we see more of that background. And this would be a good opportunity to add that fixed attachment. So now when we scroll down, we get that cool effect like I showed you in my example. So this is a way to do that and you can play around with the positioning and stuff to get more of the image to show, but really, this is how to achieve that effect that I showed you in the example by playing around with the positioning on the individual column itself.

Now we can do this up here as well if you wanted to add the fixed background to this, but I think it looks really cool just on the column itself, especially when you’re scrolling down, it gives it more of a customized look.

And in this column, we can add a completely different background image if we wanted, we can add a color, we can just leave it plain white and add some text to it. The options are endless, but this really does let you play around with the layouts and give you some cool effects.

We’ve covered how to add background images to entire sections, we’ve covered how to add them to individual columns, now I’m going to show you that you can add background images to specific widgets.

I’m going to drag over a heading widget into this right column. And instead of going to style, I’m going to click advanced. If we scroll down, there is where you can add a background.

The process is the same. We’ll click classic, we’ll upload and insert our image and you can see the background is showing, but we do need to make some more adjustments in order for the image to actually show up well.

I’m going to go up to advanced and I’m going to add some padding around the entire heading. You can see the background image a lot better, more is showing. So I’m just going to go back to background and make some adjustments to the positioning of the background, I’m going to set it to no repeat and then I’m going to change the size to cover. And I’m happy with how that looks in there. I like the position of the background in this specific widget.

You might be wondering, “why would I need to ever do this?” But there are actually cases where this can be really useful. If you are working off of a static image, like something designed in Illustrator, Photoshop, or Adobe XD and you have a really precise layout that you’re trying to achieve, something like this is really useful. Actually, all of the tools that Elementor provides can be really useful because you don’t have to hack code. You can just go in adjust the settings, they let you really customize every portion of your website, which is why I love Elementor so much.

So there you have it. We have adding background images to an entire section, adding it to a column, and adding it to specific widgets. Hope you can play around and get some really cool effects on your website.