How to do this effect - Post ID 285306

User 2699991 Photo


Registered User
2,416 posts

Byron Tipping wrote:
Thanks Wayan -will give this a crank


The thing to remember is set the container, whatever holding the 3 boxes to the same height (min/max) as the background image column/container whatever that is
The Help You Need: When You Need It The Most
User 458539 Photo


Registered User
1,224 posts

Ok I need to ask some stupid ?s

1 - Place the photo in as background (size - cover)
2. set min at 600 - max at 800 (of column pos cnt and top)

As I move the size slider the height only stays at the min setting. Max-height doesn't seem to do anything.

I know this should be easy

Byron

User 458539 Photo


Registered User
1,224 posts

Ok - I have no idea what vm means but I played with that and that part is working working

Thanks

User 2699991 Photo


Registered User
2,416 posts

vmin & vmax are CSS thingies to tell CSS to display something depending on a length value

so a vmax value of 40 set to the height of the element will display whatever it has been assigned to as a height of 40% of the maximum length of the device viewport viewport

so, a header given a height of vmax = 40 will adjust itself accordingly (mobile phone held in portrait view will display the header as 40% of the maximum length of the device viewport, if the user changes to landscape view, obviously the maximum length viewport of the device changes so the header will automatically change to 40% of the new maximum lenth

vmin works the same way except for it calculates the height according to the MINIMUM length of the device viewport

working the two together for a background with vmin set to the height & vmax set to the MINIMUM height setting, helps stop that background image from changing too much as the viewport size increases.

take a look at the short video here
https://youtu.be/tzo1-FUe7q4

don't concentrate too much on the other stuff, watch the background image, as it moves through the sizes, there is a little bit of movement, but not so much that a lot of the image disappears as can happen with images that haven't been given those vmin/vmax values.
The Help You Need: When You Need It The Most
User 2699991 Photo


Registered User
2,416 posts

Byron Tipping wrote:
Ok I need to ask some stupid ?s

1 - Place the photo in as background (size - cover)
2. set min at 600 - max at 800 (of column pos cnt and top)

As I move the size slider the height only stays at the min setting. Max-height doesn't seem to do anything.

I know this should be easy

Byron

2. set min at 600 - max at 800 (of column pos cnt and top)

for background images the vmin & vmax need to be the same height value but of course, that's going to be different, which makes it look like nothing is happening.

I found it easier, in the beginning, to set the height setting of the element in pixels (say 600) first then change it to vmin (it automatically give the vmin value)

then move to the minimum height setting for the element, set it to the same pixels height (600), & then change that to vmax, I am used to it now so no longer need do it that way,

The Help You Need: When You Need It The Most

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.