Super new to Webflow here (and web design overall) ! Binge watched the Webflow University Intro over the weekend and decided to move my site over to Webflow and learn how to create epic designs (I have a long way to go). Currently trying to rebuild my Wordpress site in Webflow to get some practice - sorry if this question is too easy, but I couldn’t figure it out from reading other posts.
I’m currently stuck with my hero image. I know it’s best to upload the hero images as backgrounds but because this particular image needs to have my face in it when it scales down to other breakpoints it looks so odd- my face get’s cut off. I’m wondering what my best method to complete this is. I want it to look like this
Thank you for this. So I set the image to Cover after having a look at that. However, it was still unclear to me how to add text over top. I’ve been trying to do it with relative/absolute positioning, but I’m having a hard time figuring out how to not make everything overlap and I tried to use a Flexbox to right align and centre the text but I can’t get it to do so as it thinks the image is part of it and moves that around as well. So then I tried using columns
I’m not sure why I can’t grasp the concept of all this, I watched the videos but as soon as I put things into action they don’t work how I think they will!
For example, so far I’ve got this content onto of the image but I cannot figure out how to centre it within a column. And when I look at different breakpoints it’s so messed up !
sorry for no response for a couple of days, have been away from the PC involved in some other work the last few days.
Anyway, there are a couple of ways to do what you want, but it can be lengthy trying to explain everything in words.
In summary, you want to wrap your image in a container (not necessarily the webflow ‘container’ element, can be a normal div), make it ‘relative’, place your image inside and then have a div wrapper containing your text, make the wrapper absolute (which will look for the first ‘relative’ parent and position itself to that)
Then you can style / position your text.
Happy to make a video if this does’t really make sense or if I’ve confused you more!!
Thank you for this! I had tried a little bit more before this message and started to understand how it works. I then decided to leave my website on wordpress and work on building something new but I’m definitely going to need to know how to do this for future sites. Appreciate it!
The way you explained it makes so much more sense with the wrappers and where the ‘absolute’ looks for the ‘realtive’ parent. I think that’s the part I was not understanding
Good on you.