Section Backgrounds Misaligning on Smaller Screens

Site URL: http://www.takebackyourcareerpodcast.com

Hello,

When observing my website on my iMac the background images line up as shown in the first attached picture. The problem is that if I begin to shrink the screen to mimic a smaller-resolution screen (but not mobile) the first background image and background image below it (behind the Listen On podcast buttons) begins to misalign. I am wondering how I might fix this so that the two background images always remain in alignment.

The code I am using for each background image is the same (with a different image URL):

//Home Page - Header Background//
[data-section-id="5f728df4a2487d69f23c6e91"] .section-background img {
    visibility: hidden;
}
/* set new image */
[data-section-id="5f728df4a2487d69f23c6e91"] .section-background {
    background-image: url(https://static1.squarespace.com/static/5f69447dc6605c1f7a7ec913/t/5fa9da9f34227d39e14408de/1604967071475/Home+Page+-+Header+Background+2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

//Home Page - Listen On Background//
[data-section-id="5fa9ca76099a931d362aabbf"] .section-background img {
    visibility: hidden;
}
/* set new image */
[data-section-id="5fa9ca76099a931d362aabbf"] .section-background {
    background-image: url(https://static1.squarespace.com/static/5f69447dc6605c1f7a7ec913/t/5fa9da964f8f02449a094548/1604967062656/Home+Page+-+Listen+On+Background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

Thank you!

On 11/12/2020 at 5:54 PM, gogreenmsu said:

Site URL: http://www.takebackyourcareerpodcast.com

Hello,

When observing my website on my iMac the background images line up as shown in the first attached picture. The problem is that if I begin to shrink the screen to mimic a smaller-resolution screen (but not mobile) the first background image and background image below it (behind the Listen On podcast buttons) begins to misalign. I am wondering how I might fix this so that the two background images always remain in alignment.

The code I am using for each background image is the same (with a different image URL):

//Home Page - Header Background//
[data-section-id="5f728df4a2487d69f23c6e91"] .section-background img {
    visibility: hidden;
}
/* set new image */
[data-section-id="5f728df4a2487d69f23c6e91"] .section-background {
    background-image: url(https://static1.squarespace.com/static/5f69447dc6605c1f7a7ec913/t/5fa9da9f34227d39e14408de/1604967071475/Home+Page+-+Header+Background+2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

//Home Page - Listen On Background//
[data-section-id="5fa9ca76099a931d362aabbf"] .section-background img {
    visibility: hidden;
}
/* set new image */
[data-section-id="5fa9ca76099a931d362aabbf"] .section-background {
    background-image: url(https://static1.squarespace.com/static/5f69447dc6605c1f7a7ec913/t/5fa9da964f8f02449a094548/1604967062656/Home+Page+-+Listen+On+Background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

Thank you!

Bumping! Thank you!

Do you still need help on this?

On 11/21/2020 at 9:30 AM, tuanphan said:

Do you still need help on this?

I ended up switching the background on the lower section to be an all-white background with the upper section having white clouds at the bottom (making it appear seamless). So I think I am OK for now but will poke you if I do need more help with something like this in the future 🙂

Thanks, @tuanphan!