Blog

06 Feb 2018

How to Make a Fullcover Row Background with Themify Builder

Tutorials / 36 Comments

Instead of using a regular white background for your website, why not try using an image that fully covers your page? We think it could help create a minimal looking site that is both sleek and modern. To achieve this look, you'll need to insert some custom code – but fear not, for we've provided easy step-by-step instructions.

You can also go a step further than a single image and instead, opt for the image slider (a slideshow of pictures), a video, or gradient colours.

View Demos

1. Single Image - single static background image.
2. Image Slider - fullcover image slider in the background.
3. Video Background - video background playing in the background.

Here's a sample page to see what this modification looks like with a ,, and .

Step 1: Add "fullcover-bg" In The First Row's Additional CSS Class

• Open the page you want to customize and turn on Themify Builder in your admin bar at the top
• On your page's first row, click the Option icon in the upper right corner to open the Row Options Panel
• In the Additional CSS Class field, input "fullcover-bg"

Step 2: Choose Your Photo/Video

• Click 'Styling' beside 'Row Options'
• Click 'Background'
• Select the Background Type (Image, Gradient, Video, Slider)
• Upload the image(s) or video of your choice
• In the 'Background Mode' dropdown menu, click 'Fullcover'
• Click 'Done'
• Click 'Save' in your admin bar at the upper right corner

Step 3: Add Custom CSS

• Head to your theme's customization panel: Click 'Customize' on the admin bar at the top
• Using the menu on the left, scroll to the bottom and click on 'Custom CSS'
• Copy and paste the following into the Custom CSS field:

    .fullcover-bg {
	width: 100%;
	height: 100vh;    
	position: fixed;
	top: 0;
	left: 0;
}
.themify_builder_active .fullcover-bg {
	position: static;
}

• Click 'Publish'

Step 4: Add Content

• To add a module to your page, create a second row and start from there. Your content will automatically lay on top of the background image.

And just like that, you can easily change the look and feel of your website. Don't forget, you can opt for the slider for an automatic slideshow of images or select video to add give your website a more dynamic look. You can also choose to play with the Row Overlay in the Styling panel and give your picture a faded quality.

We hope this helps add that something extra to your site. Let us know how this tutorial was and what you'd like to see more of! Stay tuned for more.