Today I show you how to change a background image in a specific section of a page.
In some case your page layout might contains a background image or a
color that you want to replace. To change it, it's very easy.
okay first click Edit with elementor.
Now locate the section that contains the background you want to change and click this little icon
Now you will see several options in the left panel. Click style then the background option will show up.
You have the option to use a background image a solid color a
gradient background or even a video background.
To change the background image simply click the little pen icon and delete and replace the existing
picture by your own image.
The dimension of your background image should be
around 1600 pixels width by 750 pixels height.
Upload a jpg file and avoid using a PNG
file for your background because PNG or heavier and less optimized.
The file size of the image will be not higher than 500k
okay now select which position you want to set the background image.
That's useful if your subject is positioned on the right part of the image by example
so on responsive devices the background will focus on the right part of it.
Finally you can add a parallax effect when you scroll down the page
To use this feature, select Fixed in the attachment drop down.
I also recommend that you set the size as cover so your background will cover the the whole space of your section.
You can also select a solid color by clicking the color picker
and choose a color don't forget to delete your image first then click the
color picker here.
If you want to change your background with a gradient color
click the gradient icon and choose the color of your choice you can also adjust
the angle of the gradient and its position
To set a video background simply click the little camera icon and copy paste your YouTube Link.
You can set a start time and end time and the video will loop infinitely
the fallback image is also recommend on mobile device you must be aware that
video background cannot play that's a restriction set by the mobile devices to
avoid extra bandwidth usage for your users so the fallback image would be
shown when the video background is not supported.
You can also set a background overlay that will be displayed over your background. This is very useful if you
have a light background with light text in the foreground so you probably want
to darken your background image a little bit.
so that's it I hope you enjoyed this video. Thanks for watching