Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] How to attach text the same way like "background-attachment: fixed"?

Home Forums Support How to attach text the same way like "background-attachment: fixed"?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #497803
    Roland

    Hi there,

    on this site you see that the background image is fixed and will be covered at scrolling.

    How can I make the text behave in the same way? The text shouldn’t move at scrolling.

    Roland

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #497831
    Leo
    Staff
    Customer Support

    Hi there,

    Not sure if I’m getting this. If nothing moves when scrolling then how would people view the page?

    If they both have the same effect, wouldn’t that equal to background image not fixed?

    Can you provide an example of what you are trying to achieve?

    #497839
    Roland

    Hi Leo,

    ah, sorry for not being clear …

    Only the text in the header “Playground ยท Just another …” should be fixed. The navigation bar and the lorem ipsum of course should scroll.

    In other words, the whole content of the header should be attached including the header text.

    #498233
    Leo
    Staff
    Customer Support

    If the text in the header and its background image is fixed, wouldn’t that be the same as having both of them unfixed?

    Can you provide an example of the effect you are going for?

    #498535
    Roland

    Hi Leo,

    thank you for your patience.

    You can see the effect I’m going for her:
    http://playground.site-bakery.de/

    On scrolling the yellow text in the header is fixed, the text doesn’t move. That’s what I’m going for.

    But what you see is just a workaround, a fake to let you see what I’m looking for. I put the text into a SVG. It’s not text, it’s an image. And that of course will cause problems on mobile view.

    So, my question is: is there a way to fix text in the header if the text is really text and not an image?

    Roland

    #498613
    Tom
    Lead Developer
    Lead Developer

    I believe you’d need to set your text to position: fixed;

    So the container would have position: relative, then you would do this:

    <span class="text-container">Your text</span>

    .text-container {
        position: fixed;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    Haven’t tested it, but it should work in theory.

    You can find tons of examples by Googling: parallax text

    #498752
    Roland

    Good morning Tom,

    ah, that’s the point, now I understand. I spent hours on searching the web for ‘fixing text’ or ‘text attached’ or something like that – with no results.

    So, if I want an object to scroll different than the rest of the page, in any case it’s parallax. And in my specific case it’s parallax with speed=0 or something like that … But first of all it’s parallax …

    I’ll try your code later und will get back to you if it works.

    Thank you for your time, both your’s and Leo’s – I really appreciate this.

    Roland

    #498988
    Tom
    Lead Developer
    Lead Developer
    #499055
    Roland

    Hi Tom,

    need some more help …

    Testing your code will lead to this result:
    http://playground.site-bakery.de/
    Text doesn’t move, it is fixed โ€“ but on scrolling it overlays the following content.

    Obviously background images and text act in different ways, as you can see here when you scroll:
    http://playground.site-bakery.de/page-header/

    So I think the real question is: how to make text beeing background? How to make text fixed AND beeing covered by the following content?

    I googled for “How to make text background” with no success.

    Here’s what I’m looking for:
    http://playground.site-bakery.de/target/
    (I wished that could be realized using plain text instead of an image.)

    Puh, I know, actually that is a bit off topic, as it is rather private lessons in CSS than support of your theme.

    Have a nice weekend. I don’t expect – if at all – a soon answer.

    Roland

    PS: And, honestly, I would be glad too if somebody told me “Hey, Roland, what you are looking for doesn’t exist.”

    #499284
    Tom
    Lead Developer
    Lead Developer

    Perhaps give this a shot?:

    .site-header {
        z-index: -1;
    }
    #499680
    Roland

    Hi Tom,

    z-index: -1; was the missing link โ€“ thank you!

    Another problem was, that when I fixed the text with position: fixed;, it jumped elsewhere. I couldn’t center the text properly. It seemed as if display: flex; and position: fixed; can not be used together.

    Finally this showed me the way:

    .fixed-top {
      display: flex;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }
    

    Source: Wylliam Judd

    So first I fixed the flex-box itself instead of fixing the flex-item. And second I gave it some extend.

    Here’s the result:
    http://playground.site-bakery.de/

    Works fine with Chrome, Firefox and even with Chrome and Firefox mobile. (Only in Edge the header shivers on scrolling manually. The header doesn’t shiver when scrolling is done by the plugin “Scroll to ID”.)

    I just wanted to share this…

    Thanks again, Roland ๐Ÿ™‚

    #499878
    Tom
    Lead Developer
    Lead Developer

    Awesome! Thank you for sharing the full solution ๐Ÿ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.