Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] How can I make the following text over my image fluid?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #188296
    iizag
    Participant

    An example of what I have now can be seen here : http://bitfiu.com/example/

    The problem is when I mess with my browser screen size the words dont move with it and arent fixed inside the image like id like it to be. Here is my css right now :

    .home-introimage {
        background-image: url("http://bitfiu.com/wp-content/uploads/2014/11/desktop.jpg");
        background-position: center center;
        height: 350px;
    }
    .home-mainheadlineinside {
        color: #fbfbfb;
        display: block;
        font-family: "Open Sans",sans-serif !important;
        font-size: 60px;
        font-weight: 400;
        line-height: 1.111em;
        margin-left: 309px;
        margin-top: 163px;
        position: absolute;
        text-align: center;
        width: auto;
    }

    and my html:
    <div class="home-introimage"><div class="home-mainheadlineinside">WORDS WORDS.</div></div>

    #188323
    JustinF
    Participant

    If you want them top center just remove align-items: center.

    If you still need that text pushed down a little ways from the top just add margin-top: to your .home-mainheadlineinside class.

    #188338
    Paulie_D
    Member

    Is this what you are after?

    http://codepen.io/Paulie-D/pen/QwWaov

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.