Jump to content

How do I reposition the background image in a section on 7.1?

Recommended Posts

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 by danivinokurov
Link to comment
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
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

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.