[Resolved] Content of header image moving up and down as browser width changes

Home Forums Support [Resolved] Content of header image moving up and down as browser width changes

Home Forums Support Content of header image moving up and down as browser width changes

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #849206
    David Bennett

    I want an image between the primary and secondary navigations, so I uploaded an image to / Background images / header.

    The problem is that the content of the image moves up or down depending on how far out I pull the browser window, and sometimes the content of the image is being lost behind the main navigation.

    When I inspect it I see that it is div class “inside-header” and its dimensions vary depending on how far out I pull the browser window. The vertical distance stays the same but the horizontal dimension changes, eg 1352×164 or 913×164.

    I don’t understand what the choices (attachment. Fixed, local, inherit) mean, but I have tried various settings and uploaded the image at various sizes and aspect ratios, and I cannot get the content of the image to remain at the same visibility whatever the browser width.

    I watched the video on the header element but the page hero seems to be about featured images in posts and the Site Header section doesn’t have an option for an image to be uploaded or chosen, so that doesn’t seem to be what I am after, and I am stuck.

    Thanks

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #849218
    David
    Staff
    Customer Support

    Hi there,

    try these settings:

    No Repeat
    Contain
    Attachment
    100% 0

    #849236
    David Bennett

    Thank you. That worked.

    If I wanted to understand a bit more about the rules that govern these settings – is there something you could point me to?

    #849238
    David Bennett

    One thing, The zero after the 100% in ‘100% 0’ – What is the function of the zero?

    #849254
    David
    Staff
    Customer Support

    So first off Contain is a background-size property. It means fit the image to the container no matter what. So it will always scale to the smallest dimension:

    https://www.w3schools.com/cssref/css3_pr_background-size.asp

    Attachment is just the default state of the background-attachment property, so its not fixed or anything fancy:

    https://www.w3schools.com/cssref/pr_background-attachment.asp

    Positioning is a X and Y value expressed ( mainly ) as a % percentage. X% and Y%:
    0 0 is the left hand top corner.
    50% 50% is the center of the image
    100% 100% is the right hand bottom corner

    So each of them will position the image relative to its container. So 100% 0 is the the right hand top corner.

    As a note when it comes to CSS you do not state the unit value (eg %, px) when the value is 0.

    #849260
    David Bennett

    Thanks 🙂

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