How to shrink browser-wide image in Integrity 2

http://www.mindfultrader.com/

The banner image the top is way too big for my taste. I loaded a smaller image, but it’s expanding it.

How can I make that banner image be smaller. I want it to still be wider than the “core” width of the rest of the page, but I don’t want it to be so huge that it can’t even fit the whole image into the screen. I basically want it to be as big as the original image I uploaded (I think it’s 1643 wide x 636 tall).

Thanks!

Hi Eric,

You can try changing the background size from cover to contain

You may also change it to other values to achieve your desired size. Please check the link below

https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=auto

Hope this helps

I don’t see the same options as shown in your screenshot when I try to edit the image. I can’t find any option for “size and position”. Screenshot attached.

Also just to clarify, my editing options look different than your screenshot whether I’m trying to edit a classic image element, image element, or “background image”.

Hello Eric,

You have a different element settings because you are using the Classic section element and @Paul.r is showing the V2 section element settings.

We recommend that you use the v2 section elements instead. If you are not seeing it, please go to the “Layouts” and press CMD (for Mac) or CTRL for Windows users and you will see “Add Section” or “Add Classic Section” as you hit/release the key.

By the way, I have checked your page and it turns out that you added a Gap element with 100% height inside the column. You can control the height of section background image by adjusting the height of your gap. Feel free to change the Gap height to 50% and you will see a difference in height.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.