Set featured image is huge on home page

The panel background images are set to “cover” the open area with any photo or graphic with the following default CSS code from the theme:

.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}

Basically any featured image you apply to the page will be stretched to cover the area which is why your logo is oversized.

If you are still wanting to use your logo in that spot, then you need to add some custom CSS to the Additional CSS tab in the customizer to target that specific post featured image. The ID of your page there is 39, so it would have to be:

.post-39 .panel-image {
    background-size: auto;
}

You can also adjust the open space as well by adding a height such as:

height: 40vh;

Then your custom CSS would be something like:

@media screen and (min-width: 48em) {
   .post-39 .panel-image {height: 40vh;}
}

All together your CSS would be:

.post-39 .panel-image {
    background-size: auto;
}
@media screen and (min-width: 48em) {
   .post-39 .panel-image {height: 40vh;}
}

I set the height to 25vh but while that is the size of my logo it scrolls behind and down. Have a look.

try this:

@media screen and (min-width: 48em) {
.background-fixed .panel-image {
    background-attachment: initial;
}

it should sort out the scrolling issue

I am getting a missing } error. I can’t figure out where to put it.

It does fix the scrolling till I select another page and then come back.

I added a } at the end and it appears to be working now. But the background is a different shade the rest of the pages. Have to see if the client picks up on it.

Thanks for the help.

@media screen and (min-width: 48em) {
.background-fixed .panel-image {
background-attachment: initial;
}
}