Streaming live at 10am (PST)

Working with text/heading


#1

Hi everybody

I am completely new to webflow.

I have big trouble to write a text header on top of a image.

After adding a ‘div block’ and a ‘heading inside of that’ and i click in the ‘heading’ block, it just select the image. And i can’t write ind the ‘header’ block.

What is the proces to ad text on top of a image in a tile 'section. And why can’t i write text when i HAVE added a ‘div block’ and a ‘header block’ inside?

Please help

/Thanxs


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @Mads_Egevang,

Hmm, that does sound odd.

Could you provide your Webflow share link so that I can take a look?

If you are unfamiliar with your share link - take a look at the following:

Thanks! :nerd_face:


#3

Hi and thanks

Her is the link. I need to add a big header on top of the picture…

https://preview.webflow.com/preview/mads-egevangs-groovy-portfolio?preview=95f2d2e57b1e446876caadcdcd26af57


#4

Thanks, @Mads_Egevang!

To place text over your image, I would suggest making it a background image. You can do the following to complete this solution:

  1. Make “Hero section” position:absolute and full, adding the background image (setting the image size to “Cover”).
  2. Then, you can add any element within the “Hero section”

The following video will show you how I completed these steps:

Hopefully this is helpful :blush:

Definitely feel free to reach out to me if you have any questions.

Best regards,
Micah


#5

Big help - Thank you!


#6

:blush: No problem!

Glad I could help


#7

Hey @micahryanhtml, @Mads_Egevang, didn’t mean to jump in, but if you want the image to scale responsively you’ll need to do this, because a background image won’t move centered with the browser on scale. Then you can reduce text using VW real easy. I had this happen earlier. Here’s a neat fix for you guys to store in your toolbox :grin:

#1 - Section
Flex: Justify Center, Align Center
Overflow: Hidden
Relative

#2 - Div Block:
Block
Absolute
Typography: Center
Insert the two text components

#3 - Add Image:
Must be really large, bigger the the section I.e., 2900 x 2000
No styles added

#4 - Text Scale:
The text will stay centered, the Image will scale down. To have text scale, add “VW” in typography text size to each device view, incrementing up each view. It’s personal preference. Adjust - Text Size & Line Height. Percentages could be used, but I prefer this.

Desktop: Heading 3 & 8, Paragraph 1 & 3
Tablet: Heading 5 & 8, Paragraph 2 & 2
Mobile Landscape: Heading 5 & 8, Paragraph 2 & 2
Mobile Portrait: Heading 7 & 8, Paragraph 2 & 1

If you want the text more towards the top, it takes some tweaking but only adjust on the Text Wrapper Div, not the Section. Take the section Flex to Align Top, instead of Align Center. Use inner padding on the text wrapper, adjust for each device view.

Now you’ll have a beutiful high resolution header image with clean centered text on top. Just wanted to share.

See ya.


#8

Oh, awesome! Thanks @garymichael1313.

I hadn’t run into that issue yet. Thanks for your input.

In regards to @Mads_Egevang layout: the centered position background image scales well:
22 PM

Also, the use of flexbox isn’t as friendly to users on older IE installs, but that may not be the user base: https://caniuse.com/#search=flexbox

I did notice that the text would be cut off on smaller screensizes, but that can be easily remedied by using relative units (percentages, viewport height, viewport width, etc), and absolute positioning.

The following video shows some of the steps I took:

Hopefully this helps :blush:

Thanks again @garymichael1313. I’ll definitely keep that in mind.

Best regards,
Micah


#9

No problem I’ll be bookmarking you guys’ conversation as well. It’s best to stay well-rounded with all kinds of solutions. I see you do good work in the community. Hope you have a great Patriots weekend! Heehee :wink:


#10

Hi Micah

Thank i’ll check it out - Huge thanks!!

Mads


#11

Hi garymichael1313

Huge thanks - i’ll check it out!

Mads


#12

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.