Banner Image not centred in background

Site URL: https://mango-cylinder-yeyd.squarespace.com/

Hi Everyone,

I've designing a new client site with a solid navigation at the top and a background banner image underneath.

I've noticed that the image position is not centred correctly in the banner height? Take a look at the Free Resources page and you can see that there is a geometric symbol that should sit in the centre vertically, but it's not.

I think that by default the banner images are set to fill the height including the navigation section and this is fine for most images, but when there is an important element that needs to be sat in the middle, it cant be changed?

Is there some code to fix this easily?

Many thanks in advance :0)

5 hours ago, jasonconway said:

Site URL: https://mango-cylinder-yeyd.squarespace.com/

Hi Everyone,

I've designing a new client site with a solid navigation at the top and a background banner image underneath.

I've noticed that the image position is not centred correctly in the banner height? Take a look at the Free Resources page and you can see that there is a geometric symbol that should sit in the centre vertically, but it's not.

I think that by default the banner images are set to fill the height including the navigation section and this is fine for most images, but when there is an important element that needs to be sat in the middle, it cant be changed?

Is there some code to fix this easily?

Many thanks in advance :0)

Could you share the site with password?

On 2/26/2021 at 1:15 AM, jasonconway said:

Site URL: https://mango-cylinder-yeyd.squarespace.com/

Hi Everyone,

I've designing a new client site with a solid navigation at the top and a background banner image underneath.

I've noticed that the image position is not centred correctly in the banner height? Take a look at the Free Resources page and you can see that there is a geometric symbol that should sit in the centre vertically, but it's not.

I think that by default the banner images are set to fill the height including the navigation section and this is fine for most images, but when there is an important element that needs to be sat in the middle, it cant be changed?

Is there some code to fix this easily?

Many thanks in advance :0)

The url doesn't exist.

23 hours ago, tuanphan said:

The url doesn't exist.

Hi Tuanphan,

URL agatapalmer.squarespace.com

the password is @gatapalmer

On 3/2/2021 at 8:33 PM, jasonconway said:

Hi Tuanphan,

URL agatapalmer.squarespace.com

the password is @gatapalmer

Try adding to Design > Custom CSS

/* REsources page - center banner image */
body#collection-6037be0cc7726751e3d5f881 article section:first-child .section-background img {
    object-position: 50% 50% !important;
}

On 3/6/2021 at 2:29 PM, tuanphan said:

Try adding to Design > Custom CSS

/* REsources page - center banner image */
body#collection-6037be0cc7726751e3d5f881 article section:first-child .section-background img {
    object-position: 50% 50% !important;
}

 

Hi Tuanphan,

That didn't change anything sadly?

On 3/12/2021 at 12:14 AM, jasonconway said:

Hi Tuanphan,

That didn't change anything sadly?

I see it changed here. You can adjust 50% 50%

Also you haven't changed SEO Title so the browser tab name still shows "General 1"

Hi tuanphan,

I can see that the first % moves the image left or right but the second % isn't doing anything. Would this be down to the actual images height?

Jason.