Viewing how do I make a picture with full width and browser height

how do I make a picture with full width and browser height



User: Ralf E. 6 years ago
Hi, i want to create a site similar to http://animabeachpalma.com
There is a picture, which adapts full width of the browser and the height of the browser. Then the text scrolls through. How can i create the picture with full with an the height of the browser window?

Thanks for your ideas.

Last edit 6 years ago
User: Roddy 6 years ago
This feature seems to be popular with the "paint by numbers" web designers using Wordpress. Like all WP designs, it uses a bunch of complex scripts to create something fairly simple.

The solution I came up with to create a single image was to use a 100% width div with a background image and use viewport units for the height.

Here's a demo with the image scrolling with the content and another with the image fixed and the content scrolling over it.

I guess the easiest way to create a slider would be to adapt one of the Hero widgets.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 6 years ago
A few months back I did a design for a CSS animated image with a scroll down button. Here's a DEMO of it adapted to fill the viewport height on page load.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Ralf E. 6 years ago
Hi Roddy,

thanks. this is great. and the image scrolling would be fine. but i don't understand, what i have to do in everweb. Could you explain me the steps?

Last edit 6 years ago
User: Roddy 6 years ago
At the moment, the only way to do it would be to create the image and all the content below it using one of the new Code Insert widgets.

I have outlined a solution in THIS topic. If the EverWeb Developers could provide us with a template like this, we could use stacked widgets to create any type of Hero and Responsive content. It would allow EverWeb users to compete with all these Wordpress designs without having pay for expensive templates.

So far, there has been no response to this but perhaps it may get attention if others were to request this type of feature.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 6 years ago
I have started a section in Code Snippets which will deal with viewport height items.

The first one is a single, viewport height image with options for a heading and the scroll down link.ll down link.

I'll follow up with how to create the content, add a zoom animation and then move on to a slider when I get time.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.