Streaming live at 10am (PST)

Fixed text and changing background


#1

Hi!

I'm beginner and I would like to get a little help...So I want create an Info page about my product, I want to make a changing background (like a gallery), but fixed text ( no changes, no fade in/out). how can I do that? I assumed that to make a gallery effect, I need to use sliders, but when sliders changes my text also changes (fade in/out)...How it can stay fixed?


#2

Imagine your content as two main "layers", one on top of another.

The first layer contains your slider (for the automatic slideshow), the second layer contains your fixed text.

I imagine you want this to be fullscreen (full-browser).

Give the Body element height 100%
Add a section and call it "background section". Give it height and width 100%, position:absolute, z-index1. Add a slider in it and tweak it for it to be height:100% (add a class name to the slider element and give it height:100%) then add images to your slides, set the slider to automatic. You can add class names to right, left arrow and navigation dots and pass them to display:none to hide them all.
Add another section in the body (not in the first section, move it from the navigator tab if you need) and call it "foreground section". Width and height:100%, position:absolute, z-index:2.
Now your two sections are the one on top of another. Add container and divs for your text in the foreground section and position it as you want.

For great effect, you can add a transparent pattern on the background of the foreground section, to dim it up and make the text stand. Tons of transparent textures here: http://www.transparenttextures.com/


#3