How do they do this Headline Treatment

User 458539 Photo


Registered User
1,393 posts

Hey folks

https://www.regalpooldesign.com/

Below the banner where it says - Luxury Vacations In Your Own Backyard

Thanks all,

Byron
User 458539 Photo


Registered User
1,393 posts

Sorry - I get how you can place an image in the background and place copy over it. I was wanting to not use an image - You see how this one is copy and not an image. My pages tend to be image heavy and trying to cut back on that as much as I can. I suppose I could make that image a gif and low res it for effect but was hoping to do it with copy instead.

Thanks all

Byron
User 122279 Photo


Senior Advisor
13,163 posts
Online Now

My guess is, that they have a fixed BG image, and above that a transparent layer with the text. Having one bit of text half-way covering another might have been done with negative margins, perhaps some z-index. Anyway, it works in IE11, so it can't be anything advanced. ;)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 283347 Photo


Registered User
377 posts
Online Now

there are some codepens available that do that.

just fyi
Mark
User 187934 Photo


Senior Advisor
19,190 posts

Inger wrote:
My guess is, that they have a fixed BG image, and above that a transparent layer with the text. Having one bit of text half-way covering another might have been done with negative margins, perhaps some z-index. Anyway, it works in IE11, so it can't be anything advanced. ;)

Yes they used neg top margins.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 458539 Photo


Registered User
1,393 posts

Wow what is a codepen?????
User 283347 Photo


Registered User
377 posts
Online Now

codepen.io

here is one example https://codepen.io/jayrebing/pen/VGrmNz

when you go there search "shrinking nav bar" there are several examples...some easier than others to modify.
Good luck!
Mark
User 458539 Photo


Registered User
1,393 posts

Sorry - not describing the right area on the page.

Look further down under the top 50 wirte letters on the blue banner. It says in the background WHY REGAL POOLS with Luxury Vacations In Your Own Backyard over the top of it

Thanks

Byron
User 187934 Photo


Senior Advisor
19,190 posts

Neg top margin on the Luxury Vacations In Your Own Backyard div
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
19,190 posts

Look at this.
Attachments:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.