gogreenmsu Posted November 12, 2020 Share Posted November 12, 2020 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! Link to comment
gogreenmsu Posted November 15, 2020 Author Share Posted November 15, 2020 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! Link to comment
tuanphan Posted November 21, 2020 Share Posted November 21, 2020 Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
gogreenmsu Posted November 24, 2020 Author Share Posted November 24, 2020 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! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment