- This topic has 6 replies, 2 voices, and was last updated 2 years, 2 months ago by David.
March 25, 2019 at 7:02 am #849206David 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.
ThanksGeneratePress 2.2.2GP Premium 1.7.8March 25, 2019 at 7:18 am #849218DavidStaffCustomer SupportMarch 25, 2019 at 7:26 am #849236David 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?March 25, 2019 at 7:28 am #849238David Bennett
One thing, The zero after the 100% in ‘100% 0’ – What is the function of the zero?March 25, 2019 at 7:38 am #849254DavidStaffCustomer 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:
Attachment is just the default state of the background-attachment property, so its not fixed or anything fancy:
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.March 25, 2019 at 7:46 am #849260David Bennett
Thanks 🙂March 25, 2019 at 7:48 am #849262
- You must be logged in to reply to this topic.