Full size hero images are Cropped

Hi Ismail,

For the first page, I was able to configure Color Section + background image size to an acceptable combo.

But for the 2nd test page (I’ve since renamed it – see link below) , I need the background image here to be smaller (Color section minimum size~ 300px) – close in size to the Law Firm demo images for all pages excluding Home page. The background image truncates at the top for every Attachment Display Setting – thumbnail to Full size image. Is there css code to truncate only from the bottom rather than the top? As a workaround to this problem I uploaded smaller images but upon uploading the small images resized and the top also truncated. If top truncation can’t be controlled is there a setting to override automatic re-sizing of uploaded images? Thanks!

Image size – 1800 by 750 pixels
Color Section minimum size 300px

Hi Ismael,

I’d love to have CSS as a solution but I did something wrong or the CSS isn’t not working. I added the below to general styling Quick CSS then added photo to Custom CSS Class for the Color section. There’s no change. If I got this wrong please let me know.
1) What is v-145nae-c0b58b0338c14abb31641a8e3d686685 ? Is that specic to the Test page 2 photo? If we can get this to work, I’ll apply this solution to 4-5 other pages that have the similar min Color Section size + background image size issue.

.photo .avia-section.av-145nae-c0b58b0338c14abb31641a8e3d686685 {
background-position: top center;
background-position: 50% 30%;
}

2) While testing, I discovered that this is an issue with screen size – The photo looks perfect on a phone and tablet, is truncated at the top by ~ 0.5 to 0.75 inches on my compact laptop screen, and truncated at both the top and bottom by 1-2 inches on my large 27 inch monitor. Any way to get around this? Please see screenshot links below.

Hi, thanks for your suggestion which I’ve tested! I was able to find parameters that work for each of the 4 files I need to configure.

Because #av_section_1.is a global ID attribute referenced on multiple images/pages, I couldn’t use it to set the required parameters for each image file. I used the syntax below. It’s working on my desktop (external monitor and compact laptop) and when I resize desktop browser windows to tablet/mobile size. BUT when using a tablet and this code is active, hero images disappear for almost all site pages in all browsers (chrome, safari, firefox).

This only happens with tablets (mobile view is fine). Color section min size = 750px for pages requiring custom background image positioning. Links to pages with the custom CSS are below. Any solutions would be appreciated. Thanks.

.class-hero1 {
background-position: center bottom 85% !important;
}

.class-hero2 {
background-position: center bottom 80% !important; }

Hi Mike and Ismael,

I’ve been putting out some fires – thanks for your patience! I was able to get images to display as needed with CSS for each unique image that needed a position tweaked. Please close this ticket.