I am in the story

Kids like reading adventures about themselves!

#1 a fixed background image

A WORK IN PROGRESS

this text will scroll while the image stays fixed
click/tap the colored blocks in the header to scroll to that panel

#2 a text panel

A WORK IN PROGRESS

the panel will grow and shrink as the page is resized

information

With single page websites becoming more popular and also the use of fixed background images with slants to define the various sections, I thought that I would produce a simple layout using CSS with a little jQuery showing how easy this is.

Works in all the latest browser version including tablets and smartphones. iPads and iPhones do not support fixed backgrounds so on these devices the background images scroll.

The layout is fully responsive and uses @media queries to resize the text for smaller screen sizes.

 

So you have a choice of using the vertical scrollbar to move from section to section, or use the colored blocks in the header to have jQuery smooth scroll to a specific section.

Each section can contain any code you like.

The 'slants' are produced using css linear-gradients and can be any color you like and the angle of slant can be easily adjusted by a small change to the slant style.

#3 second fixed background image

A WORK IN PROGRESS

these edges can be any color you like

#4 second text panel

again any code you like

the background color should match the edge colors

#5 a third fixed image

A WORK IN PROGRESS

a view of the lake in this national trust estate

#6 third text panel

A WORK IN PROGRESS

this panel will grow and shrink with the browser size



#7 porta de pollenca

A WORK IN PROGRESS

the sea was calm and produced some great reflections

#8 almost at the end of the page

A WORK IN PROGRESS

and the section grows and shrinks

#9 steampunk hq, oamaru

A WORK IN PROGRESS

for steam punk fans

#10 last but one text panel

A WORK IN PROGRESS

just one more panel below



#11 the last panel

A WORK IN PROGRESS

so the end is nigh, just the footer to go