Blog

How to Make a Fullcover Row Background with Themify Builder

How to Make a Fullcover Row Background with Themify Builder

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.

36 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.org/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.org/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

      • Filipe Oliveira
        Mar 08, 2019 @ 16:02

        Hi,
        I have the same exact problem. Footer is enable, i can see the return up arrow, but no social links and no copyright

        Reply

        • Cecilia @ Themify
          Mar 08, 2019 @ 18:08

          Hi Filipe,
          Our support expert advised me to let you know that, yes, the code may hide the footer on some themes. But that they would need your website link and admin access so we can check your user settings. Please post your issue on our Support Forum (for the fastest response times) or contact us via email: themify.me/contact

          Reply

  13. Apostolis K.
    Dec 26, 2018 @ 13:23

    Hello, i have a problem with making a video background full width. I can make it fine for desktops but the same doesnt apply on mobile phones, even when i check it on pc it seems good but on actual phone it doesnt go full width. Tried the solution with fullcover-bg and the css but my problem is the “height:100vh”. If i reduce the 100vh to 30-35 it is ok but the number for the hight is different on every mobile device i try it on. I guess it has to do with different aspect ratios of screens etc. Is there a better way of doin this?

    Reply

    • Csaba @ Themify
      Jan 03, 2019 @ 00:55

      Hi Apostolis,

      Please post this issue to our support forum, so we can help you there: https://themify.me/forum

      Reply

  14. Rebecca
    Jan 19, 2019 @ 18:25

    How do I get a full width slider background?

    Reply

    • Csaba @ Themify
      Jan 19, 2019 @ 23:41

      Hi Rebecca,

      You can create a full-width Slider Background in Themify Builder Edit Row > Styling > Background – set Slider and Insert Gallery: https://cl.ly/fc49ab8580f9

      Reply

  15. iiswansongii
    Jun 05, 2019 @ 16:33

    In your corporate theme demo, you have a video background that plays ‘behind’ the logo and main navigation. This in searching is how I found this tutorial. However, with a recent version of corporate, ‘mode’ is no longer a setting for background videos. Do you have other advice for recent versions of themify corporate theme to be able to do this?

    Reply

    • Csaba @ Themify
      Jun 05, 2019 @ 19:20

      Hi,

      If you mean this demo: https://themify.org/corporate/home/company-landing/ the background-video is added to the Row in Row Styling > Background => Video: https://cl.ly/e765f40512b8 if you are referring to a different demo, please send us a link to it, so we can help you to replicate the same what you can see on any of our demos.

      Reply

      • J Brown
        Jun 06, 2019 @ 15:59

        Yes thank you! that is what I mean. In your screenshot, notice the video doesn’t stretch up behind the header logo and navigation. However if you view the demo directly, it does go behind (i screenshot what I mean with a red arrow). The arrow i have in there is pointing to the video sky that does move behind the header and the navigation. How did you get it to do that? The row video background only stops at the top of the row.

        Screenshot here
        https://drive.google.com/file/d/1wpb8RFIHrljOjh3oSN5e9P0I1PURiD-X/view?usp=sharing

        Reply

        • Csaba @ Themify
          Jun 06, 2019 @ 20:37

          Hi @J Brown,

          The Header is set to “Transparent Background” in Themify Custom Panel: https://cl.ly/a41efed13103 so if the transparent header is set it will cover the first Row from the top.

          Reply

  16. johnny
    Jul 22, 2019 @ 09:37

    Is it work on Shoppe theme ? I tried but nothing happen

    Reply

    • Csaba @ Themify
      Jul 22, 2019 @ 16:35

      Hi Johnny,

      It should work with any Themify theme if all 4 steps are applied correctly, please double-check and if everything is correct, but it is not working, please send us a link to your website, to the page where the Fullcover Row is applied, so we can check why it isn’t working for you.

      Reply

  17. Geofrey
    May 13, 2020 @ 05:41

    Hi
    i have used ken burn effects as my background slide mode but it is not responsive.I need help

    Reply

  18. ADISA
    Apr 25, 2023 @ 16:13

    Hi,

    It’ possible to add background color to product image with themify?

    Reply

Leave a Reply to Apostolis K. Cancel