We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How Can I Achieve This Look?

Featured Lock Resolved Issue
Hello,

I'm trying to create a design element like the large body image found at the bottom of this page;
https://www.topgear.com/car-news/big-reads/it-911-reimagined-singer-and-williams

I am trying to create a constant region of text that begins above the image, with the balance of the image exposed after the last few trailing paragraphs, as seen in the attached example or on this live link.

How do I approach this?

I've selected and sized an image for this application with dimensions of 1920px x 1280px.
I'm struggling with the proper CSS options to make this happen and wonder if an override is a better way to go?

I am not strong on CSS styling and lack the proper knowledge to create the results I'm looking for.

Any assistance is most appreciated,
Thanks in advance! :)

Attachments (1)

  • design-idea.jpg
    design-idea.jpg 917.5 KB

2 Answers

[email protected]

More than a month ago #Permalink
I've managed to solve this.
For those interested...

I created a row with this image as the background, then offset the top padding of this row by the same dimensions as my image. (image set as: No Repeat/Cover/Scroll/Center Bottom)

I've then added a text block and styled it to using negative padding to roughly equal that of the offset above.

If anyone has any better methods of achieving a similar look, I'd love to hear your approach!


There are replies in this post but you are not allowed to view the replies from this post.

124

Templates

331440

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us