[Pro] Multiple Backgrounds

How do you do this?

Resize the page to see the top background effect-
http://www.davidsylvian.com/texts/interviews/18_quick_questions_to_david_sylvian.html

It looks like 4 layers to me-

1 background

2 one assigned Left

3 one assigned right (?)

4 top layer, centered

Thanks to whoever can help with this!!!


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

Resize the page to see the top background effect-
{ davidsylvian.com } 18 quick questions to David Sylvian

Oooh, that’s a rather lovely trick. :slight_smile:

Okay, it isn’t possible (as far as I know) to assign more than one
background image to a page. However, it is quite possible to assign a
background image to a layer (div), have that container stretch with
the page width, and set different alignment attributes for different
ones. I haven’t dug deep into the page but I’m fairly sure that’s how
that is done.

k


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

Multiple background images are supported in CSS3 but browser support
is limited, at least it was when I tried this trick. I had put
together an example at one time using divs but there’s no reason it
would work as a page background. There are a lot of tutorials to be
found. Google “multiple background images css3” or similar.

Todd

On Oct 28, 2009, at 12:51 PM, Keith Martin wrote:

Okay, it isn’t possible (as far as I know) to assign more than one
background image to a page.


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

Oh that’s great, thank you Todd!!! (and Keith from early post : )

|

On Oct 28, 2009, at 11:09 AM, Todd wrote:

Multiple background images are supported in CSS3 but browser support
is limited, at least it was when I tried this trick. I had put
together an example at one time using divs but there’s no reason it
would work as a page background. There are a lot of tutorials to be
found. Google “multiple background images css3” or similar.

Todd

On Oct 28, 2009, at 12:51 PM, Keith Martin wrote:

Okay, it isn’t possible (as far as I know) to assign more than one
background image to a page.


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


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

Hi Jamie,
Looking at the source code for the page you’ll see, as Keith
suspected, that the technique uses nested divs each with a background
image that floats over the last.
Here’s another cool one;
http://silverbackapp.com/

The effect is called parallax and is explained here;
http://carsonified.com/blog/design/how-to-recreate-silverbacks-parallax-effect/
Regards,
Tim.

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


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

Wow, thank you so much Tim!!!

|

On Oct 28, 2009, at 11:19 AM, Tim Plumb wrote:

Hi Jamie,
Looking at the source code for the page you’ll see, as Keith
suspected, that the technique uses nested divs each with a background
image that floats over the last.
Here’s another cool one;
http://silverbackapp.com/

The effect is called parallax and is explained here;
http://carsonified.com/blog/design/how-to-recreate-silverbacks-parallax-effect/
Regards,
Tim.

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


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


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

Here’s that proof of concept example I made a year+ ago, <HugeDomains.com

. Because there’s so little browser support for this technique - it
only works in Safari (I think) - it’s not much help; the nested div/
parallax trick as mentioned is by far the better option. Still, it’s
fun to see what could be if there wasn’t such a lag in browser
support.

Todd


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

It’s the jQuery parallax plugin:

http://webdev.stephband.info/parallax.html
http://progtuts.info/186/create-a-parallax-website-header/

Joe

On 28 Oct 2009, at 19:18, Todd wrote:

Here’s that proof of concept example I made a year+ ago, <HugeDomains.com

. Because there’s so little browser support for this technique - it
only works in Safari (I think) - it’s not much help; the nested div/
parallax trick as mentioned is by far the better option. Still, it’s
fun to see what could be if there wasn’t such a lag in browser
support.

Todd


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


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

One other note I would add is-
from the original first link I posted, the interesting part for me,
was that it’s only visible when the window is resized (visible with
all platforms?), whereas the Parallax approach needs you to mouse-over
it to see the effect!

My thanks to all offering insight on this!!!

|

On Oct 28, 2009, at 12:31 PM, Joe Billings wrote:

It’s the jQuery parallax plugin:

http://webdev.stephband.info/parallax.html
http://progtuts.info/186/create-a-parallax-website-header/

Joe

On 28 Oct 2009, at 19:18, Todd wrote:

Here’s that proof of concept example I made a year+ ago, <HugeDomains.com

. Because there’s so little browser support for this technique - it
only works in Safari (I think) - it’s not much help; the nested div/
parallax trick as mentioned is by far the better option. Still, it’s
fun to see what could be if there wasn’t such a lag in browser
support.

Todd


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


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


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

It’s still the same thing, you can just set it to be defined by the
width of the browser (I say just, I haven’t tried this :)).

On 28 Oct 2009, at 20:27, Jaimie wrote:

One other note I would add is-
from the original first link I posted, the interesting part for me,
was that it’s only visible when the window is resized (visible with
all platforms?), whereas the Parallax approach needs you to mouse-
over it to see the effect!

My thanks to all offering insight on this!!!

|

On Oct 28, 2009, at 12:31 PM, Joe Billings wrote:

It’s the jQuery parallax plugin:

Pat's Travels in Europe
http://progtuts.info/186/create-a-parallax-website-header/

Joe

On 28 Oct 2009, at 19:18, Todd wrote:

Here’s that proof of concept example I made a year+ ago, <HugeDomains.com

. Because there’s so little browser support for this technique -
it only works in Safari (I think) - it’s not much help; the nested
div/parallax trick as mentioned is by far the better option. Still,
it’s fun to see what could be if there wasn’t such a lag in
browser support.

Todd


actionsdev mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


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


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


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

haha!!! Okay, thank you sir!!!

|

On Oct 28, 2009, at 1:38 PM, Joe Billings wrote:

It’s still the same thing, you can just set it to be defined by the
width of the browser (I say just, I haven’t tried this :)).

On 28 Oct 2009, at 20:27, Jaimie wrote:

One other note I would add is-
from the original first link I posted, the interesting part for me,
was that it’s only visible when the window is resized (visible with
all platforms?), whereas the Parallax approach needs you to mouse-
over it to see the effect!

My thanks to all offering insight on this!!!

|

On Oct 28, 2009, at 12:31 PM, Joe Billings wrote:

It’s the jQuery parallax plugin:

Pat's Travels in Europe
http://progtuts.info/186/create-a-parallax-website-header/

Joe

On 28 Oct 2009, at 19:18, Todd wrote:

Here’s that proof of concept example I made a year+ ago, <HugeDomains.com

. Because there’s so little browser support for this technique -
it only works in Safari (I think) - it’s not much help; the nested
div/parallax trick as mentioned is by far the better option. Still,
it’s fun to see what could be if there wasn’t such a lag in
browser support.

Todd


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


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


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


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


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