Support Forums

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

Your Time: Our Time:

Banner image appearing pixelated on article pages

Featured Lock Resolved Issue
Hello,

The banner image on some of my articles is appearing pixelated - this is no matter what size I upload. Other articles are perfectly fine. This is the URL: http://www.assima.net/case-studies/multilingual-sap-training-retail

Thanks,
Assima

7 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
it's because that image is be default displayed as background image with "background-size: cover;"

Please try this code inside custom.css:


.article-item-header-wrapper {
background-position: top center;
background-size: contain;
background-attachment: scroll;
}


It will help, then you can upload wider image if you want.

Attachments (1)

  • 0-0.jpg
    0-0.jpg 240 KB

Assima Marketing

More than a month ago #Permalink
Hello,

Thanks for the response. Could you specify where exactly I need to add the above code? Is it in the template custom css section? If so, which is the correct section below?

CUSTOM CODE

Before </head>

Before </body>

Custom CSS

Custom Javascript

Thanks!

Assima Marketing

More than a month ago #Permalink
Ok - the code worked but now some images are too small and i get a black margin on the sides: http://www.assima.net/newsroom/2017/sap-training-achieves-cost-reduction

What is the exact image size that fits the new container?

Thanks!

Paul Frankowski - Staff

More than a month ago #Permalink
I suggest to use banner image which have
1920px
OR
at least 1366px of width

above info is based on Screen Resolution Statistics

Assima Marketing

More than a month ago #Permalink
Thanks - and image height?

Paul Frankowski - Staff

More than a month ago #Permalink
try to keep between 400-450px
---
you can reduce also white top padding in single article view,
I mean between Banner and Text, this should be useful:

.article-item-full-text { padding: 50px 0 0;}


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 128
Sifat

Sifat

Total Accepted Answers: 89
Toufiq

Toufiq

Total Accepted Answers: 45
Pavel

Pavel

Total Accepted Answers: 6
Sohan

Sohan

Total Accepted Answers: 5

114

Templates

292794

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