[Pro] full browser hero image

I want the hero image to be fullpage flexible and the body wrapper to sit at the bottom of browser window so that when you manually scroll page it immediately appears.

At the moment you scroll a quarter of the page before the body appears.

any ideas?

http://www.mattbrooke.co.uk/test/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Select the DIV ‘poppys’ and add this to Extended Attributes / DIV Styles :
Name: height
Value: 100vw !important

Currently ‘poppys’ has a fixed height of about 3500px. By overrule the height to 100vh it will have a height of 100% of the viewport’s vertical dimensions.

Fixed :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Correction, the Value should be : 100vh !important

Sorry :stuck_out_tongue:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I cant be sure without seeing your page construction but reducing the height of PageWrapper to 1120px did it for me.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I sure hope Freeway will support values like vw and vh soon, it’s soo easy using viewports values since then.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I sure hope Freeway will support values like vw and vh soon, it’s soo easy using viewports values since then.

Very interesting Richard - you learn something new every day.

Always been impressed by your parallax page construction knowledge.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you both and Richard will have a look at viewports very interesting.

Many thanks Matt.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This reminds me of something we put on the CSSWAY Workbench a while back
for Richard…

http://cssway.thebigerns.com/workbench/richardvans-quest/


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Completely true, Ernie … but now, a couple of months later, I found this CSS3 supported vh/vw value far, far more easy to use.

Richard van Heukelum


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s something niftly you can do with text and viewport size: vw, vh, and vmin

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk

On 29 Oct 2014, at 13:10, Richard van Heukelum email@hidden wrote:

Completely true, Ernie … but now, a couple of months later, I found this CSS3 supported vh/vw value far, far more easy to use.

Richard van Heukelum


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s exactly where I learned using it :smiley:

And Matt, you’re welcome!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks again Richard. It’s working a treat!

http://www.mattbrooke.co.uk/test2/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks again Richard. It’s working a treat!

You should probably provide a fallback for older browsers - haven’t tried it in IE8 but its not right in Safari 5

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thats a nice site. is it done with anchors? how? thx
Carla


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

is it done with anchors? how?

http://www.freewaytalk.net/thread/view/125569#m_125575

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

thx always DM


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 29 Oct 2014, 7:33 pm, Matt wrote:

Thanks again Richard. It’s working a treat!

http://www.mattbrooke.co.uk/test2/

Nice, but why not setting it to

background-size: cover;

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 29 Oct 2014, 7:33 pm, Matt wrote:

Thanks again Richard. It’s working a treat!

http://www.mattbrooke.co.uk/test2/

And it’s very, very nicely done as well. This is a beautiful design all together … great work Matt!

Regards, Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

“I think we’ll have white wine with the fish.”

There is a specific reason I long stopped this parallax stuff. The reason is called: iDevice (and its excellent support of fixed background-images)

Have you tested it? Do it - for some reason.

The workaround for me (cause I have no better solution) is, to set the background-attachement to scroll on iDevice’s breakpoint.

background-attachment: scroll

Which means: No parallax on iOS (but at least a “working” page).

I think I read nearby all topics about it and as far as I’m oriented there is only some java-script fix and honestly all of them are way above my helmet.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the advice Thomas couldn’t get ‘background-attachment: scroll’ to work.

have been trying https://github.com/rodneyrehm/viewport-units-buggyfill

at the moment it scrolls to BodyWrapper on iphone but not sure how to get background image to fit proportionally, and not sure how it looks on other devices

http://www.mattbrooke.co.uk/test2/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options