Parallax pics zoom – Themeco Community

Parallax pics zoom

Anja L — Tue, 21 Oct 2014 22:09:07 +0000

Hi,
for some reason when I put a background pic in the content band (blank – no container) it makes a huge difference regarding the image section that is displayed, depending if its with parallax effect or not. How can I integrate a background pic, with parallax effect but without zooming and loosing quality because of that? It should be displayed exactly as a normal background pic regarding with, only with parallax effect.
Thanks much!

Reply To: Parallax pics zoom

Anja L — Tue, 21 Oct 2014 22:11:32 +0000

This reply has been marked as private.

Reply To: Parallax pics zoom

Paul R — Wed, 22 Oct 2014 09:30:10 +0000

Hi Anja,

To fix the parallax, You can add this under Custom > CSS in the Customizer.


.x-content-band.bg-image {
    background-size:contain !important;
}

Reply To: Parallax pics zoom

Anja L — Fri, 24 Oct 2014 15:17:16 +0000

This reply has been marked as private.

Reply To: Parallax pics zoom

Zeshan — Fri, 24 Oct 2014 17:12:16 +0000

Hi Anja,

The above given CSS will force the background to remain inside the content band, however you can use following CSS code instead, which will show the original size of the image:

.x-content-band.bg-image {
   -webkit-background-size: auto !important;
   background-size: auto !important;
}

To use images with parallax, you can try using the images of double height of the content band.

Thanks!

Reply To: Parallax pics zoom

Anja L — Tue, 28 Oct 2014 11:30:06 +0000

This reply has been marked as private.

Reply To: Parallax pics zoom

Zeshan — Tue, 28 Oct 2014 14:39:27 +0000

Hi Anja,

By default your background-position is set to 50% 50%, but then as soon it loads, it is set to 50% 14px. So the jump comes from the vertical position changing from centered to calculated. You can try using following CSS code to avoid this:

.x-content-band.bg-image.parallax {
   background-position: 50% 0px;
}

Hope this helps. 🙂

Thank you.

Reply To: Parallax pics zoom

Anja L — Wed, 29 Oct 2014 15:13:44 +0000

Thanks!

Just in case other people have the same problem, it worked with

.x-content-band.bg-image.parallax {
   background-position: 50% 0px !important;
}

🙂

Reply To: Parallax pics zoom

Nabeel A — Wed, 29 Oct 2014 23:03:11 +0000

Hi Anja,

Glad you’ve sorted it out. Just for the background color problem, you can fix it by adding custom CSS:

.x-content-band {
border-top: none !important;
}

Cheers!

Reply To: Parallax pics zoom

captsalamander — Mon, 08 Dec 2014 19:56:05 +0000

Hi,

I had the same problem and so I used the “contain” CSS above. However, the image appears a bit too high, leaving a white space in the bottom of the content band (see http://sigmastatus.com/assessment-2/.

Earlier I tried using a vertical position CSS but that messed up the parallax in Chrome and Firefox.

Any way to get the image to position itself right below the menu bar? The image actually begins at the top of the guy’s hat.

Thanks!