Change Focus area for Background Images and Background Videos

Change Focus area for Background Images and Background Videos

Summary

This SOP details how to adjust the focus point for background images and videos in Tent Apps. It provides step-by-step instructions on using CSS to fine-tune video focus and adjusting image positions intuitively.

Code

Class:
header

Free-Form CSS:
.header video {top: 40% !important;
    left: 0% !important;
    transform: translate(0%, -35%) !important;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;}

Overview

  1. Duplicate the section where you want to change the background.
  2. Go to Settings and then select Advanced.
  3. Add a class to the section (this can be any name, but note it for later use).
  4. Paste the provided CSS code into the appropriate field to manage the focus point.
  5. Adjust the focus point by changing the numerical value in the CSS until the desired focus is achieved.
  6. Click the checkmark to confirm your video settings.
  7. To change a background image, delete the video and add your preferred image.
  8. To adjust the image focus, set the background image position (e.g., Center, Bottom Center).
  9. If needed, modify the vertical offset to further fine-tune the image positioning, ensuring it’s not set to Center for offset adjustments to work.
  10. Click the checkmark to save your changes.
  11. If you need assistance, reach out to us at support@tentapps.com.

Original Transcript

Hey guys, here's a quick video on changing the focus point for a background, um, image and video. So, just for these purposes, I'm going to duplicate this section. And for right here, I'm I, you can see that you can see the top of, or actually, you can see that you can see the top of somebody's head right here. And I want the person in this video to be the focus point. So, I'm going to go to settings right here. And then I'm going to go to advanced. And the first thing I'm going to do is I'm going to give this a hit. And And this class can be whatever you want. But I'll show you where it's important to remember that class. Now, if you go down here, I have this CSS already in my clipboard and you saw it move right there. And I'll go paste this in the SOP so that you don't have to go through and type this line by line. But you can see, let me make this a little bit smaller. You can see right here, this is that class. So that's where that's important because if I take these away, see it doesn't work anymore. So I want to remember those. And then let's say I, it moved my video, but it's not quite at the right focus point. This is the only number that you can you'll need to change. So maybe I want it to be 45. You can see that changed it a little bit, or maybe I want it to be 25. You can just play around with this number and it can be as specific as you want it to be. And you just want to just play around with it until it looks right. But my gochoo was 35 and that cup, that has everybody's face in the video. So that's what I want. Now I'm gonna hit the check mark for this guy. So that's how you do it. I'll put for a background video. But I'm gonna go over here and I'm gonna delete the video for this one and I'm gonna add a background image and I can show you how to adjust that as well. So we're gonna use this background image. And as you can see, In this box, there's a globe in there. But if you look right here, you can't see that globe. I wanna change the focus point of that background image. Now, it's a little bit easier in for the background images. You just change the background image position. Now if I go to the video tab, that's not an option. That's why we had to use that CSS code. But for the image, I can change it to center. Or I can change it to bottom center. And that brought it in. But maybe I wanna move it a little bit more. You can change the vertical offset a little bit. Now, something to remember is if you have it centered, it's not gonna give me that option to change that vertical offset. So you, it has to be either a top or a bottom. So that has it. Let's move it down a little bit. There we go. I think that's pretty good. And then we can hit the checkmark and we're good to go. So that's how you change the focus point, just so that you're not zoomed into the very top of your image or something that's completely unimportant in your image. But if you have any questions at all, or if you want us to make this change for you, we'll be happy to. You can just reach out to us at support.

    • Related Articles

    • How to Add Images, Graphics, or Videos to Your Tent Apps Media Library

      Your media library will be the hub for any type of media you wish to use in your blogs, announcements, social media posts, or when editing a page of your website. Video Step By Step Accessing the Dashboard: Log in to your Tent Apps account. Upon ...
    • Adding / Embedding Facebook Videos into your Sermon Manager

      Here is a quick tutorial on how to embed your Facebook Videos into your individual sermons through your Sermon Manager on your website. Summary Open the Facebook Video on Facebook Right Click and Show Video URL Copy Video URL Now in Your sermon ...
    • Creating an Image Gallery/Slider in Divi

      Summary This SOP details the process for adding and configuring an image gallery on a Tent Apps website. It covers step-by-step instructions on selecting images, resizing them for uniformity, and adjusting gallery settings to enhance user experience. ...
    • Image Size Guidelines

      Images sizes are important to keep in mind with your new website & mobile app. Here are some guidelines to keep in mind. 1920px x 1080px 1920px width by 1080px height is the best size for your Website, TV Slides, Emails, Print Bulletins, Social ...
    • Adjusting Image Sizes

      Outline for Knowledge Base Tutorial: Adjusting Image and Column Sizing Introduction In this tutorial, we will walk you through how to adjust spacing and sizing for images and columns on your website. Whether you want to refine the appearance of your ...