[Resolved] Featured image not sizing correctly in header

Home Forums Support Featured image not sizing correctly in header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1082236
    Bruce

    I’m using Element to create a header using the featured image.
    I’m not using a GP Theme, just starting from scratch.
    The image size Dimensions: 2500 by 622 pixels.
    On the Page Hero:
    Container and Inner Container are both set to container.
    Postion is center center
    I have not disabled the feature image or checked background overlay.
    For Site Header, No Merge and Navigation Header is set to Above Header
    My problem is that the header does not resize the image while the featured image fits perfectly.
    Can you help me resolve this?
    Thanks

    #1082818
    David
    Staff
    Customer Support

    Hi there,

    Header Elements place the featured image as a CSS Background Image that is set to cover.
    Although you can adjust the top and bottom % padding to make the whole image visible it becomes tricky if you have content within the header element ( as this also adds height to the image ).

    Not sure what you’re trying to accomplish but you can add this CSS to contain your image:

    .page-hero {
        background-size: contain !important;
    }
    #1085163
    Bruce

    Hi David,
    Thanks for the suggestion. I tried it and at first it worked, but when I got removed the featured image, the image changed to being too small and repeating.

    I decided to start over again with one of the Artian them. For the home page here, I used an image that was the same size as the one that was there: 1920 x 1080. When I added it as the custom image, it was much too big. I reduced it to 1100 x 619 and it made no difference. I then added back the original image and it was no longer scaled the same was as when I downloaded the theme. I am at a loss as to how to proceed. Suggestions? http://www.whatsnext-coaching.cyclema.com.

    #1085951
    David
    Staff
    Customer Support

    Header Elements place the image as a CSS background image.
    The default option is for that image to Cover the content area, which means some of it may get cropped. To get around this we use % ( top and bottom ) padding to make it responsive.

    Try this:

    Calculate the original images aspect ratio: H / W * 100
    e.g 1080 / 1920 * 100 = 56%

    Now set the header element to full width
    And split the aspect ratio % between top and bottom padding e.g 28% top and 28% bottom.

    #1093738
    Bruce

    Works great.
    Thanks

    #1093848
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.