CSS3 Multi Background Depth Perception Trick

20 Responses

1. Pro Rick Murphy

   I'm using CSS3 multiple backgrounds with percentage positioning. The result is a REALLY nice depth perception effect when you resize the browser window.

   This is a screen shot of actual site scaled down a bit.

   Code looks something like this but still is rough:
   background: url("images/wheat.png") 80% top repeat, url("images/ground.png") 20% top repeat,
   url("images/sky.jpg") center top repeat;

   Update: http://blog.hardlycode.com/

   almost 3 years ago

2. Pro Dave Ruiz

   I couldn't put together with photoshop let alone CSS...

   almost 3 years ago

3. Pro Morgan Allan Knutson

   Dude, that's awesome.

   almost 3 years ago

4. Pro Rick Murphy

   Thanks guys! Hoping to have at least a demo up soon. Image file size is becoming worrisome... any rock star optimization tips are welcome...

   almost 3 years ago

5. Victor Vasquez

   F' this thing is amazing!

   1likes

   almost 3 years ago

6. Sean Tubridy

   Wow, really nice.

   almost 3 years ago

7. Dave Nelson

   Love it!
   Did Matthew Lyons do the illustrations for you?

   over 2 years ago

8. Pro Rick Murphy

   Flattered you think it was actually Lyons who did the illustration. It's all my work although inspired by him.

   Our branding has that atomic retro-future feel to it. That's why I went in that direction with the illustration.

   Glad you like it!

   over 2 years ago

9. Pro Éric Le Tutour

   That's amazing...
   Has it been uploaded yet?

   over 2 years ago

10. Milos Sutanovac

    This sure sounds/looks hot - can I see the finished version somewhere? (The CSS3-one)

    over 2 years ago

11. Pro Rick Murphy

    Yes Milos and Eric. It can be seen here... http://blog.hardlycode.com/

    I warn you the blog has not been officially announced as we're still working on bugs, content and beautification. We've been busy with clients (which is good) but this keeps delaying our official release of the blog.

    Feedback appreciated.

    1likes

    over 2 years ago

12. Milos Sutanovac

    That's some hot stuff, blog looks stunning!
    Best I've seen in a while.

    Great work you two, cheers!

    over 2 years ago

13. Pro Rick Murphy

    Thanks Milos!

    over 2 years ago

14. Pro Dennis Salvatier

    Looking good. I really love the yellow accent. It brings it all together.

    over 2 years ago

15. Tommy Vad Flaaten

    Man, I enjoy your cool style! Keep it up! The simple shapes and the detailed textures creates an awesome mood in your work.

    over 2 years ago

16. Anthony Harmon

    love this one Rick

    over 2 years ago

17. Joe Prince

    Real good looking stuff Rick. Love the textures.

    over 2 years ago

18. Ryan Capogreco

    Lyons inspired?
    http://matthew-lyons.com/category/locations

    over 2 years ago

19. Pro Rick Murphy

    @Ryan Yus. I talk about that a few posts earlier ^ I actually changed the wheat in the final version because it was a little too close to his.

    http://blog.hardlycode.com/

    over 2 years ago

20. susie ghahremani

    really love the softness of this!

    1likes

    about 2 years ago