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

[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

[Leo]

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?

[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.

[Leo]

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?

[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

[Tom]

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

[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

[Tom]

No problem! 🙂

[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.”

[Tom]

Perhaps give this a shot?:

.site-header {
    z-index: -1;
}

[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 🙂

[Tom]

Awesome! Thank you for sharing the full solution 🙂

[Author]

Posts