Hello, Need help with cropping & centring background images with html

[anon65040322]

Bubble Editor - Audition

I want the html background image to mimic group background image
-center the image
-make image as wide as parent element
-crop the image to fit the element size

[anon65040322]

<style>
 .whatever {
 width: 100%;
 height: 100%;
 object-fit: cover
}

[luke2]

That will do the trick

object-fit | CSS-Tricks

[adampanza2]

Luke,

Where does one add that CSS and how?

Thanks!

[luke2]

Hey @adampanza2

If its on a page by page basis, rather than say an element that is seen across all pages on your app, then I’d use the HTML element.

Its as simple as going to the visual elements sidebar, selecting and drawing out a HTML element (can be position anywhere on page and at any size):

Then once added, you can add:

Be sure to add the opening and closing tag as shown.

There are other methods in adding custom CSS, such as on a page level or across all pages, but this is the simplest I’d say.

Be sure to then go into your app settings, under the ‘General’ tab and select:

Make sure the expose ID is checked.

This then gives you access to set an ID for an element, can also be used in conditions which is handy.

[adampanza2]

Thanks, Luke!