danivinokurov Posted May 3, 2022 Share Posted May 3, 2022 (edited) I keep running into an issue when I add background images to a section in 7.1. I'm hoping someone can help me figure out the right CSS code I need to reposition the images. I'm currently working on a fashion site for a client and several sections on each page will include background images with models. The horizontal positioning doesn't really matter (although centered is best), but the vertical position is SUPER important. When I upload the images, the models' heads keep getting cut off. It looks terrible! I've tried fiddling with the focal point settings for the section, but it doesn't make any difference. Even when I set the focal point to the very top, heads are getting chopped. Is there a way to add CSS code so that the background images in specific sections are set to top/center so my models aren't decapitated? (I wish I could share the URL, but it hasn't been published yet and it won't let me share a link) Thank you! Edited May 3, 2022 by danivinokurov Link to comment
noahawaii Posted May 3, 2022 Share Posted May 3, 2022 9 minutes ago, danivinokurov said: I keep running into an issue when I add background images to a section in 7.1. I'm hoping someone can help me figure out the right CSS code I need to reposition the images. I'm currently working on a fashion site for a client and several sections on each page will include background images with models. The horizontal positioning doesn't really matter (although centered is best), but the vertical position is SUPER important. When I upload the images, the models' heads keep getting cut off. It looks terrible! I've tried fiddling with the focal point settings for the section, but it doesn't make any difference. Even when I set the focal point to the very top, heads are getting chopped. Is there a way to add CSS code so that the background images in specific sections are set to top/center so my models aren't decapitated? (I wish I could share the URL, but it hasn't been published yet and it won't let me share a link) Thank you! You need to publish the site in private mode and share the password. That's the only way to receive help. Link to comment
danivinokurov Posted May 3, 2022 Author Share Posted May 3, 2022 Sorry. I didn't realize I could publish without upgrading the account. Here is the link: https://paddlefish-cobalt-3tm5.squarespace.com/ The password is: plusrentalrunway Link to comment
noahawaii Posted May 3, 2022 Share Posted May 3, 2022 11 minutes ago, danivinokurov said: Sorry. I didn't realize I could publish without upgrading the account. Here is the link: https://paddlefish-cobalt-3tm5.squarespace.com/ The password is: plusrentalrunway Work in data sections for each page. Each page has a data section ID. This looks like your homepage below. You can adjust the position of each image on each page if you update the correct data section. section[data-section-id = "625edbec1c2a5d32e0b8e06e"] { .section-background, .section-background .section-background-content, .section-background .section-background-canvas, .section-background .section-background-overlay { position: absolute; top: 120px !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }} You can also move an entire data section down by a certain px or unit with margin-top: XXpx !important; Then check your mobile screens and set break points for different heights with @media only screen and (max-width: XXXpx) { } Just paste in the code from above but adjusted to what works for each page. It will start to run long but that's what I would do. Link to comment
danivinokurov Posted May 3, 2022 Author Share Posted May 3, 2022 @noahawaii That worked like a charm. I adjusted the top to 100px and it looks great. Thank you! Is there a way to make sure the overlay adjusts as well? Right now it's got a 100 px gap at the top where the overlay isn't covering the image. Link to comment
noahawaii Posted May 3, 2022 Share Posted May 3, 2022 section[data-section-id="625edbec1c2a5d32e0b8e06e"] .section-background, section[data-section-id="625edbec1c2a5d32e0b8e06e"] .section-background .section-background-content, section[data-section-id="625edbec1c2a5d32e0b8e06e"] .section-background .section-background-canvas, section[data-section-id="625edbec1c2a5d32e0b8e06e"] .section-background .section-background-overlay * { position: absolute; top: 100px !important; right: 0 !important; bottom: 0 !important; left: 0 !important; } I think this may be what you're talking about. Adding an * applies something to all child items. Try adding one manually to the code you already have and if not apply this. danivinokurov 1 Link to comment
danivinokurov Posted May 4, 2022 Author Share Posted May 4, 2022 Hallelujah!!! That worked. Thank you a million times over!!! noahawaii 1 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