[Pro] Multiple Backgrounds

Jaimie · October 28, 2009, 5:24pm

How do you do this?

Resize the page to see the top background effect-

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

Keith_Martin · October 28, 2009, 5:51pm

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

Oooh, that’s a rather lovely trick.

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

Account · October 28, 2009, 6:09pm

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

Jaimie · October 28, 2009, 6:13pm

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

Tim3 · October 28, 2009, 6:19pm

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;

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

Jaimie · October 28, 2009, 6:21pm

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;

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

Account · October 28, 2009, 7:18pm

Here’s that proof of concept example I made a year+ ago, <http://www.xiiro.com/demo/multiple_images/index.html

. 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

Joe2 · October 28, 2009, 7:31pm

It’s the jQuery parallax plugin:

Joe

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

Here’s that proof of concept example I made a year+ ago, <http://www.xiiro.com/demo/multiple_images/index.html

. 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

Jaimie · October 28, 2009, 8:27pm

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:

Joe

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

Here’s that proof of concept example I made a year+ ago, <http://www.xiiro.com/demo/multiple_images/index.html

. 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

Joe2 · October 28, 2009, 8:38pm

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, <http://www.xiiro.com/demo/multiple_images/index.html

. 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

Jaimie · October 28, 2009, 8:41pm

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, <http://www.xiiro.com/demo/multiple_images/index.html

. 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