Parallax portfolio center image

2 replies · opened Jan 22, 2018

WwildeJan 22, 2018

Hi!

The images in the parallax portfolio are not centered on desktops. They are on mobile devices.
I would like them to always be centered, in any resolution.
How do I achieve this?

<section id="content">
<div class="content-wrap nopadding">
<div id="portfolio" class="portfolio portfolio-parallax clearfix">
<article class="portfolio-item pf-media pf-icons">
<div class="portfolio-image" style="background-image: url('images/home/1.jpg');" data-bottom-top="background-position:0px 300px;" data-top-bottom="background-position:0px -300px;"><div class="portfolio-overlay"></div></div>
<div class="portfolio-desc">
<h3>1</h3>
<div class="portfolio-divider"><div></div></div>
</div>
</article>
</div>
</div>
</section>

Cheers, Paul

SSemicolon WebSTAFFJan 24, 2018

Hello,

You can consider using the following CSS Code:

.portfolio-parallax .portfolio-image { background-size: cover; }

but the Parallax performance might take a hit.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WwildeJan 24, 2018

Great! It works fine.

Thanks!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard