How do I stop the Brine template from zooming in on my cover banner?

Site URL: https://www.carolyntaraoneil.com

Is there any way to preserve the original size of an image when using as homepage banner? My site is https://www.carolyntaraoneil.com, and you can see that Squarespace keeps zooming in, ruining the image entirely by cropping the edges off. 

I'm in version 7.0, Sonny template (Brine family), and I don't seem to have the ability to edit css. Thank you.

If you want to continue to use the parallax feature I would say no. That feature is doing what it needs to create the effect and display as much of the image it can without cutting off to much of one dimension or the other ( h, w ).

You could lose the effect and try with a regular image block at the top of the page.

What happens when you go to Design > Custom CSS? Do you see something like the following?

Thanks for the reply. When I go to that CSS page, the white box at the bottom (where you have your code) is blank. 

As for parallax, I can disable it, but that doesn't change the appearance of the image at all -- it's still cropped. 

I don't think this template has the ability to add an image block to the homepage. 

Creedon was asking about the panel, unless you have used code it will be blank at the bottom. And if you don't use a banner thumbnail image, you can move move that image to an image block. I have two sites using the same template family. 

Well, other than the (blank) white box, it looks exactly the same as Creedon's picture. Is there a way to solve this with css? 

You're right, I figured out how to add an image block, thanks for the tip. But that doesn't seem to work any better -- the fit is just as awkward as using the banner. 

Any other suggestions?

3 hours ago, CarolynTara said:

As for parallax, I can disable it, but that doesn't change the appearance of the image at all -- it's still cropped. 

Both parallax and background images will be cropped. My question about the parallax was more if you were married to having that feature enabled for that page and that image.

I think what you want can be achieved using an image block and some CSS.

This first image is from your site.

This second image is from my test site using an image block and CSS.

You'll notice that the sides are not cropped.

I'm only part way to seeing if a fully working effect can be achieved.

Yes, that is just what I'm trying to achieve! Neither the sides nor the bottom are cropped in your version. Howe did you get there?

Thank you for working on this.

1 minute ago, CarolynTara said:

Howe did you get there?

As I said I'm not there yet but so far it is going pretty good. Dealing with mobile is next.

The basic concept is to use an image block. Then manipulate it to be full bleed. Plus a number of other tweaks.

I'll take a crack at the mobile tomorrow.

I would try this effect on a test index page first.

Once your test index page set up on the first page of the index add an image block, upload your image, and select poster for design.

Put your name in the title.

Add a code block above the image block.

Enter the following in the code block.

<style>

  .Index-page:first-child .Index-page-content {
  
    padding-left : 0;
    padding-right : 0;
    
    }
    
  .Index-page:first-child .sqs-block-image .design-layout-poster .image-title-wrapper {
  
    font-size : 9.875vw;
    
    }
    
  .Index-page:first-child .sqs-block-image .design-layout-poster .image-title p {
  
    color : #084d96;
    font-family : eds-market-main-script;
    letter-spacing : 0.1em;
    
    }
    
  @media screen and ( max-width : 480px) {
  
    .Index-page:first-child .sqs-block-image .design-layout-poster .image-title-wrapper {
    
      font-size : 15vw;
      
      }
    }

  </style>

Click the APPLY button and SAVE the page.

Let us know how it goes.

Thank you so much for helping! What I ended up doing is editing the image in photoshop to add a white rectangle at the top and bottom. Squarespace seemed to recognize this as part of the image (just adding a "border" in PS didn't work). So the portion of the image that's cut off at top and bottom is just the extra whitespace. It looks pretty much like what I was going for now.

I appreciate all the help!