EverWeb's Page and Browser Backgrounds
EverWebResponsive WebsiteSoftwareTips and TricksTutorialsWeb Design

New Page and Browser Background Features and Options Come to EverWeb 4.1!

The January 2024 release of EverWeb 4.1 brought some much requested features to the product such as WebP Image Format support and Lazy Loading images. The new release also added Video Backgrounds as well as other new features to both Page and Browser Backgrounds! Here’s our deep dive in to what’s new to EverWeb’s Page and Browser Backgrounds features!

All About Video Backgrounds
As you would expect, it’s easy to add a video as a Browser Background to your pages. Start by going to the Browser Background section of the Page Settings tab. Once there, choose ‘Video’ from the dropdown menu that’s to the right of the text ‘Browser Background’. once selected you’ll see the options that you can use for your video background.

Choosing Your Background Video
Begin by choosing where you video is located using the dropdown menu directly beneath the text ‘Browser Background’. There are four sources to choose from:

  1. External Video URL: Use this option when you want to link to videos from any external source. For example, you could link to YouTube or Vimeo. All you need to do is enter the URL of the video that you want to use in the box below the menu option.<<>>
  2. Local Video File: This option uses a video that’s stored in the External Files section of the Project file’s Assets List. Click on ‘Choose…’ then click on the video you want to use.
  3. YouTube Video: To get the link to the YouTube video you want to use as a background, go to the video in YouTube. Next, click on the ‘Share’ button. Click on the ‘Copy’ button to copy the video’s URL to the Clipboard. Now go back to EverWeb and just paste the link in to the field under the video type selection dropdown menu. It’s also valid to use the External Video URL menu option instead if you want.
  4. Vimeo Video: This option works in the same way as it does for YouTube video. Start by logging in to your Vimeo account, then select the ‘Library’ option to access your. videos. Choose the video you want to use as your background. Next, click on the video’s ‘Share’ button, then click on the ‘Copy Link’ button. After copying the link to the Clipboard, go back to EverWeb and paste the link in to the field under the video type selection dropdown menu. It’s also valid to use the External Video URL menu option instead if you want.

Setting Your Video Background Options
After you have set the video background to the video of your choice, you have a number of different options available as to how you want the video to work as the background. You have the same options available for each of the video types:

  1. Loop: Check this box if you want the video to continuously play.
  2. Fixed Position: If you check this option, your video background will stay in place so as you scroll, the video will also scroll as well.
  3. Scroll Speed: <<>> allow you to set the scrolling speed of the video.
  4. Play on Tablet, Play on Mobile: Toggle these options if you want the video background to be able to be played on either tablet or mobile devices.
  5. Thumbnail: You can add a thumbnail image to the video. This might benefit you if the video you have chosen is large and so slow to load, or if you just want to use a title card for the video.

More About Using Video Backgrounds
When you use a EverWeb’s Video Background, check that Page Background is set to ‘Non’e. If you have set the Page Background to Color, Gradient or Image Fill, it’s probably going to block out the Video Background behind it. You should be able to see the first frame of your Video Background in the Editor Window so it’s an easy thing to check. To see the Video Background play, either Preview or Publish your site.

When you use a Video Background, you may find it better to use one that links to an external source, such as YouTube or Vimeo. Video files on these services will have been compressed for faster loading and consistent playback. If you add a video file to your EverWeb Project file, you may find that the project loads slower (as it’s now a bigger project file) and that the Video Background may possibly take time to load if it’s a large video file. It’s probably best to test your video background to see if there are any issues before doing a final publish.

New and Improved Page and Browser Background Options
EverWeb’s Page and Browser Background Image Fill options also expand with EverWeb 4.1. New image alignment options let you control both horizontal and vertical placement of the image on the page. Additionally, you can choose whether the image scrolls, or not, when the page scrolls. In addition, for the Page Background Image Fill you can also now opt to set your image to either Tile Vertical and Tile Horizontal.

EverWeb’s new options allow you more options for your page and browser background, and there will be even more choice available in the upcoming EverWeb 4.2 release!

If you have a question about anything to do with EverWeb or about this post, please drop us a message in the Comments Section below!

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *

More in EverWeb