facebook twitter instagram linkedin thumbs-up thumbs-down arrow-right progress locked success play pause

Adding an Intrinsic Background Image

About Background Images

Using background photos is a great way to introduce stunning imagery to create a more lively website and create a hierarchy to your page designs. You can set a background photo for your pages which will display differently depending on the framework you are using. On Fresnel, Pupil, Iris, and Acuity the background image is shown behind your hero content area. Traditionally this photo will resize to fill the space behind your hero content. This is great for scenic photos, textures, and other photos that are not bothered by being cropped at different screen sizes or covered by overlaid text.

Why Intrinsic?

The new “Intrinsic” size option treats your background image like a true image, and will instead scale to always be visible at the aspect ratio native to the photo. This means the photo will instead scale naturally, and hero content will be placed on top of it regardless of how little or how long it is.

This is especially useful for things like:

  • Showcasing a group team photo on a “Meet the Team” page.
  • Contact page showing a picture of your office.
  • Detailed illustration graphics that are used as divider images.
Example: Previewing the difference on tablet

Before you begin

  • Be sure you are using a compatible framework: Fresnel, Pupil, Iris, or Acuity (affects mobile-only).
  • Be on the latest framework version.
  • We recommend only using this option when using little to no hero content to ensure text does not get cut-off.
  • We recommend you upload an image with a width between 1500 pixels and 2500 pixels.

Step 1

Access the “Page Settings” for the page you want to show an intrinsic sized photo for your hero area.

Step 2

Scroll down to the “Background / Divider” section and upload your image.

Step 3

Find the option titled “Size” below your uploaded image, and change the setting to “Intrinsic”.

Step 4

Navigate to the page in your Website Preview and review your new image on various screen sizes to ensure your image and hero content is displayed properly. If done properly your image should not be cropped and will scale proportionately at every screen size.

Was this article helpful?
Be the first to tell us!
You already voted on this article!