Image editor

Hi, I’d like some help sizing, centering background images. I found this video showing the image editor but I don’t see it available http://learncornerstone.com/lesson/article/1358801

I’ve been editing my site through my friends wpengine site, not sure if that might be the problem.

https://crossfitrep.wpengine.com/

Hi there,

The tutorial that you have linked is a different Cornerstone plugin.

Would you mind providing more information about centering a background image? I checked your site and the background images seem to look normal.

Thank you.

Thanks Jade!

Look at the “crossfit” page under programs, the “nutrition” page under programs, and the “charity” page under our story for examples of images where heads are cut off at the top, text is right on top of peoples faces etc.

What is that plug in and how can I get it? It would make life much easier

Hi There,

That Cornerstone is a Cloud Application, it is a different platform and not for WordPress. And no it wont make any difference with regards to your background-image issue.

Background-image is responsive in a different way please see this link on how background-image works. The default behavior of background-image is the cover, the image will try to cover the entire section/container by expanding itself resulting some parts of it may not be visible within the container. You can force the background-image to always fit to its container by adding the background-size:100% 100%; on the section’s STYLE field, but that will squeeze and stretch your background-image on some screen-sizes specifically on mobile phones. Have you seen your background-image on mobile?

If you need to emphasize those images then do not add it as a background, but an Image element so it will fit on the container regardless of the screen width.

I suspect you have a larger screen, because on our end the heads are not cut-off. You can add background-position: top center; on your section’s STYLE field and it will always show the upper part of the image.

Hope this shed some lights,
Cheers!

1 Like