Line up background image with the pages featured image

Hi there,

Your site’s looking great! ??

You can change the positioning of the background using some custom CSS.

To add CSS, you can navigate to Jetpack > Settings to enable Jetpack’s custom CSS module and then enter the following snippet via Appearance > Edit CSS:

body.custom-background {
    background-position: 74% 12%;
    background-attachment: scroll;
}

From the above snippet, background-attachment: scroll; keeps your image locked to one place while the values for background-position defines exactly where the image is positioned. You can change the first value to change its horizontal positioning and the second to change its vertical positioning.

Have a try and let me know how it goes.

Thank you very much for your kind words! ??

I’ve applied the custom CSS, but it doesn’t seem to have any effect on my page. :/

I do appreciate the help!!!

@mattjallday: It looks like we’ll need to increase the CSS specificity in order to override the custom CSS.

Can you please give the following a try?

body.custom-background.page {
    background-position: 74% 12%;
    background-attachment: scroll;
}

Let me know how it goes!

Perfect!!!!! THANK YOU SO MUCH! ?? <3

Now I just have to figure out if there’s a way I can blend the edges a little bit better. It’s really starting to come along. I appreciate you!

You’re most welcome! Feel free to start another thread if any extra questions come up.