Skip to main content

Forums

This topic contains 6 replies, has 6 voices, and was last updated by  maelle.robertine 3 days, 19 hours ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #146820

    my_design09
    Participant

    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!

    #146821

    Senff
    Participant

    To get the full screen background, check this post: http://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

    #146824

    Paulie_D
    Moderator

    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.

    #146833

    Senff
    Participant

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

    #282729

    ErikUnique
    Participant

    In the examples given here: http://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?

    #282769

    Beverleyh
    Participant

    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.

    #282812

    maelle.robertine
    Participant

    Thanks for the answers!

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star