August 14, 2013 at 10:30 am #146820
Hello all! Great site you have here. I’m a graphic designer with very limited css/html5 knowledge and am trying to put together a very minimalistic bio landing page that will serve as my personal website. I found a great example of what I’m trying to achieve HERE. I’m wanting a fullscreen background image that’s fixed at 100% with content that’s centered and scrollable above it that fades in when you first arrive to the page (if possible) like the example link. Could anyone point me in the right direction to some tuts or snippets to achieve this? I have scowered the web with little success on how to create something like this. Thank you for any help provided and assistance given! Cheers!August 14, 2013 at 11:11 am #146821
To get the full screen background, check this post: https://css-tricks.com/perfect-full-page-background-image/
To get the fade-in text: set it to
fadeInto make the content appear.
Here’s a very basic setup for that: http://codepen.io/senff/pen/eEnhjAugust 14, 2013 at 11:18 am #146824
I think that’s probably the way to go.
It’s not how the example site does it though. It appears to use (two?) positioned divs (with the same ID!) which contains the image.
Overall, I prefer Senff’s way.August 14, 2013 at 12:30 pm #146833
Yea I didn’t even look at the way the example code did it, I just figured the “proper” way to go about this. ;)February 11, 2019 at 5:50 pm #282729
In the examples given here: https://css-tricks.com/perfect-full-page-background-image/
The text box itself is not size responsive. If someone accesses the website from a phone or a small screen, it won’t automatically adjust. Does someone know how to make the text box size responsive?February 11, 2019 at 10:35 pm #282769
The indicated web page demos don’t include a viewport meta tag, so that would be a good start in making them responsive.
But for any specific help, try providing a small codepen demo showing your own code and clearly explain the problem you’re having vs what you expect to happen.
Also consider starting your own thread.February 13, 2019 at 2:52 am #282812
Thanks for the answers!
You must be logged in to reply to this topic.