Grow your CSS skills. Land your dream job.

Full screen Image backgrounds + Twitter feed problems {HELP}

  • # March 19, 2013 at 12:08 pm

    I’ve been wanting to achieve an effect like this for a while now, does anyone know any better examples than this: http://burciagraphy.com/ and also how I can achieve this effect?

    If anyone can point me towards some tutorials / articles that would be very much appreciated

    Thanks,

    # March 19, 2013 at 12:13 pm

    ^ lol beat me to it..

    http://css-tricks.com/perfect-full-page-background-image/

    # March 19, 2013 at 12:19 pm

    Yeah but that won’t allow slider like actions which, AFAICT, is integral to the actual question.

    # March 19, 2013 at 12:23 pm

    Thanks everyone, as @Paulie_D mentioned this doesn’t solve the whole question. I should have worded my question better as I am actually looking for a way of making the background dynamic, how is the best way to achieve this carousel effect? I’d also appreciate any more tutorials / articles you can point me towards.

    Thanks,

    # March 19, 2013 at 12:56 pm

    >http://buildinternet.com/project/supersized/

    Good link.

    # March 19, 2013 at 1:00 pm

    I’ve never used Jquery so would prefer to stay away just for now, is there a pure CSS3 alternative?

    # March 19, 2013 at 1:10 pm

    Nope…you can’t transition background images with CSS…AFAIK.

    Might be an interesting project though.

    # March 19, 2013 at 4:03 pm

    @AdamHodgson,

    Well, i started to give it a stab and ended up giving up, mainly because i need to work on my other project lol but this was driving me bonkers. Below is a start at trying to recreate this, i really wish you wanted some javascript because doing this stuff in pure css3 is way out of my zone. Maybe you can get some ideas or something??

    Failed CodePen (hold down the next button)

    However, stuff like that can be done i believe, like @Paulie_D had mentioned, this really will be an interesting project. But i scrounged up some links for you that may benefit your solution:

    http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

    http://www.ryancollins.me/?p=1041

    http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/

    I’l’ give it another crack when i can take a break, until then, good luck!

    # March 19, 2013 at 5:41 pm

    Here is a old demo I did. Closest I have to that. So with it you have the basics to the css. You just need to add a small js next and previous button. http://www.websitecodetutorials.com/code/photo-galleries/css-body-scroller.php

    # March 20, 2013 at 12:38 pm

    Thanks everyone for the great replies, I really appreciate all of your help!

    After reading a few tutorials and working along side with them for the javascript I’ve managed to produce a homepage I’m very satisfied with. Although not similar to the one in the description I prefer this one as the design evolved during production.

    Here’s a link to a public dropbox account containing my code: [My Site](https://www.dropbox.com/home/Public?select=blog.zip “New Site “)

    One problem I’m currently having is changing the colour of the twitter feed ticker, if someone could explain how to change this I would appreciate that greatly.

    Thanks everyone, feedback welcome! :)

    # March 20, 2013 at 4:04 pm

    Are you using the “Twitter” twitter feed ticker or a custom one?

    # March 21, 2013 at 12:47 pm

    The one created by Chris from the CSS-Tricks forum.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".