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

[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

[David]

Hi there,

try these settings:

No Repeat
Contain
Attachment
100% 0

[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?

[David Bennett]

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

[David]

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.

[David Bennett]

Thanks 🙂

[David]

You’re welcome

[Author]

Posts