scrollable content over fixed background image

[my_design09]

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!

[Senff]

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 display:none; at first. Then when JavaScript kicks in, use the jQuery function fadeIn to make the content appear.

Here’s a very basic setup for that: http://codepen.io/senff/pen/eEnhj

[Paulie_D]

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.

[Senff]

Yea I didn’t even look at the way the example code did it, I just figured the “proper” way to go about this. ;)

[ErikUnique]

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?

[Beverleyh]

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.

[maelle.robertine]

Thanks for the answers!

[Author]

Posts