Blog

How to Make a Fullcover Row Background with Themify Builder

Fullcover Row Background tutorial

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"
    Fullcover Row Background tutorial

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.

21 Comments

  1. Helly
    Feb 07, 2018 @ 05:19

    Wow…! Such a great details share with me. Thanks for sharing valuable information. Because I don’t have any idea about background themify builder. I was find many tutorials and any many articles, but I am not satisfy any one of them. But you provide very easily process.

    Reply

  2. James
    Feb 07, 2018 @ 14:26

    Hello

    Wow, I love this effect, I’ll apply it right now in a place I’m living.

    I noticed on this page https://themify.me/demo/themes/fullcover-body-background/video/ that the images float smoothly, currently in version 1.9.1 the parallax works but not the effect of floating subtly.

    On the other hand, in the contact form, the option of receiving a copy of the email sent still does not work.

    Thank you.

    Reply

  3. David
    Feb 07, 2018 @ 15:05

    Hello

    This looks very good and up to the quality expected from Themify. One thing, the video option doesn’t work on Firefox though the browser does have a few security/privacy add-ons installed.

    Reply

    • Kurt @ Themify
      Feb 07, 2018 @ 18:55

      Hi David,

      That’s odd. I just checked it on our end here and it seems to be working fine with Firefox. Do you mind trying to disable your addons? I believe this could be what’s causing the issue.

      Reply

      • David
        Feb 08, 2018 @ 13:34

        Hi Kurt
        I restarted Firefox in Safe Mode (to disable all add-ons) and unfortunately the video still doesn’t work. I’m running Firefox 58.0.2 (64-bit). Does anything else need to be running in the background?

        Reply

  4. Rex Graham
    Feb 07, 2018 @ 17:40

    Does this apply to Themify Landing?

    When I click Background, my only option is color.

    Reply

    • Kurt @ Themify
      Feb 07, 2018 @ 18:53

      Hi Rex,

      Yes, it does apply to Landing as well :) Please allow us to help you with this. Do you mind sending us your site URL here – https://themify.me/contact. Thank you for your patience.

      Reply

  5. civali
    Feb 08, 2018 @ 01:45

    Does have a tutorial video on how to do that? Tks.

    Reply

  6. Mia Van den Bos
    Feb 08, 2018 @ 04:06

    Great! I’ve been trying to work out how to do this for a while

    Reply

  7. Jorgern Straumfors
    Feb 08, 2018 @ 14:49

    Hi.
    My video background does not cover 100% of the window. It seems that the video should be centered and rescaled.
    I thought this would happen automatically.
    How do I adjust my background?

    Reply

  8. Ruth Elliott-Hilsdon
    Feb 09, 2018 @ 04:08

    WOW! This is awesome.
    One question, though – how did you get that motorcyclist to ‘float’ above the background on this page: https://themify.me/demo/themes/fullcover-body-background/
    ?
    I LOVE that effect!
    Is it using a .gif or .png image (with a transparent background) and a parallax effect in the styling?

    Super cool!

    :)

    Reply

    • Nick @ Themify
      Feb 09, 2018 @ 23:35

      Hi Ruth,

      That motor cyclist is a transparent PNG with parallax scrolling applied (you can apply parallax scrolling on module options > Animation > Parallax Scrolling).

      Reply

  9. Ponkichi
    Feb 09, 2018 @ 18:55

    Hi Kurt

    I want to know more about the video embedded in the background.
    I think that it takes time to embed the video and load the page.
    It leads to lowering the convenience of visitors.

    So I want to know about embedded videos.
    For example, playback time, bit rate, vertical width and width of movie etc.

    Please tell me the video settings you recommend.

    Thank you

    Ponkichi

    Reply

    • Nick @ Themify
      Feb 09, 2018 @ 23:33

      Hi,

      Try to keep video short and compress the video to reduce the file size (the smallest file the better). You can also try to insert YouTube video as the video background. Since the file is pinged from YouTube, it might loads faster than hosting it on your own server.

      Reply

  10. Chris Mueller
    Feb 11, 2018 @ 13:21

    Is this a new feature? I guess not, since placing a picture as a background instead of just a white background is something, that existed for a while already. I am only a noob, but until now it was possible to use background pictures without any css-code.

    Can someone explain please?

    Chris

    Reply

    • Kurt @ Themify
      Feb 12, 2018 @ 16:56

      Hi Chris,

      The main difference of this feature compared to adding a background image is that you now set the background image as the background for your entire site, from header to footer. Not just on one row. See our demos above and you’ll see what I mean :)

      Reply

  11. Ahni
    Feb 20, 2018 @ 17:30

    Hi I really love this effect and wanted to try it, however it was not working on my site as fullcover. The menu above still borders the top. Is there a way I can work around that?

    Reply

    • Kurt @ Themify
      Feb 27, 2018 @ 16:32

      Please allow us to help you with this. Do you mind contacting us here – https://themify.me/contact and please include your site URL so that we can provide you with better support :)

      Reply

  12. RJ Jacob
    Jul 30, 2018 @ 22:57

    Hi guys, This worked great except it hides the footer. I can’t seem to make the footer re-appear.

    Reply

    • Nick @ Themify
      Jul 31, 2018 @ 16:01

      Which theme are you using? Some themes have the option to exclude the footer. Check your Themify > Settings > Theme Settings -> Theme Appearance to make sure the footer is not disabled.

      Reply

Reply

SALE! 30% off regular purchases with code FALL08 + $50 Lifetime with code FALL08LIFE