How does image work on PRO headers

Support
#1

Hello, i wanted to have a bit of insight regarding the rules of the image element in PRO headers.

I want to play a bit with images and backgrounds, i just wanted to create a container, add the image and make it full width, i was just wondering how the “auto” setting work, because if i add a dimension it works perfectly (vh and vw to make it responsive) but if i don’t then it doesn’t add the full-width i expected it would use (as it does with the cornerstone element), instead, it just doesn’t even show if i don’t add a dimension.
same thing happens if i change the setting of the image to “scaling”
how come? how does it work or what logic does it use?

#2

Hello There,

STANDARD
1.) Width is set 200px > Retina & Dimension is Active: The image container is set to 200px, but the image itself will adjust it’s height and width proportion that will display it as sharp as possible. The image can be smaller than the 200px width you have set.

2.) Width is set 200px > Retina & Dimension is OFF. Image container is set to 200px and the image will just fill this container. Thus image is 200px too and height will adjust accordingly.

SCALE
There’s no container here. It will just adjust depending on Retina & Dimension settings and in case height of the container or bar is set. If the default image height is more than the height of the bar/container, it will be it’s maximum height and proportions will adjust accordingly.

Note that when using an image as background, it’s height and width will depend on the content you have added inside the container or the container default height and width property.

Hope this helps.

#3

ok, that’s really really helpful.

one more thing, i know the bars itself use flexbox, but how about the container and the elements (menu, images, etc)? are they all displayed as flex or use the flex css? (i.e: do the containers and elements use the display:flex/inline-flex parameter? )

sorry for all the questioning, i’m trying to find this out all by myself but some things take way too much to figure out :frowning:

#4

Hello There,

The containers and elements is also using flex. For more information and to know how you can make the most of the flex css in the custom header, please check out this knowledge base article: https://theme.co/apex/forum/t/pro-tips-and-tricks/214

Hope this helps. Kindly let us know.