Support Online : 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.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 110
Toufiq

Toufiq

Total Accepted Answers: 61
Sifat

Sifat

Total Accepted Answers: 45
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 22
Ofi Khan

Ofi Khan

Total Accepted Answers: 20

118

Templates

306197

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