Need css for background image Spirit theme

I cannot for the life of me figure out how to change the size of the main background image in Spirit. I've used the editor and it only changes the width, not the height.
I inspected the element, found what I thought would work, added some custom code, and nothing happened.
I've attached a screen shot - image is way too tall.
Help would be appreciated. Thanks!

  • Adam Czajczyk

    Hello Sadee,

    I hope you're well today and thank you for your question!

    Looking at the screenshot attached I assumes that the background region is set as "contained" and an image (background image) is set to "Full width". Is that right?

    You shouldn't need CSS to resize this part of layout, however please note the following:
    - an image is a background image, set to full width, therefore it's always scaled horizontally to fit container width
    - as a result the same image is scaled vertically to maintain proportions.

    Given that, there are two ways to make it shorter. First way is to change region (container) height. While you're in "Edit background" mode (as shown on your screenshot), place cursor over the yellow bar right below bottom yellow [+] (plus) icon. Pointer will change shape and you'll be able to drag region edge up or down, thus effectively resizing region.

    It will then get shorter, while image will still occupy full width of the region, so image will be "cropped" in height.

    Another way, which would be better would be to simply crop an image in any image editing program (e.g. Photoshop or even simple image viewer) and then use it as background. You will most likely want to resize region as well but at the same time you'll be able to crop an image the way you wish.

    Will any of these ways work for you?

    Best regards,

  • Sadee

    Thank you for our reply. I tried both suggestions and neither worked. I even went so far as to delete all my media images so I can upload the only image I want to use and that didn't work - it keeps displaying an un-cropped image - so even the cropped on I select isn't loading.

    I tried the crop feature, that you suggested under the yellow + in edit mode and, while it would show where the crop would be, it wouldn't crop it.

    Further, when I just look at the website not logged in to admin, no background image displays, just a blank screen. But when I go into admin then edit mode, the background image is there.

    I'm at a loss. I changed permissions so you can access it if you'd like and see what might be going on.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.