Size and positioning parallax images – Themeco Community

Size and positioning parallax images

Astrid — Mon, 05 Jan 2015 09:24:24 +0000

Hello,

I’m struggling with parallax-images. I’ve made the parallax-height 300px.

I have images of 2000px wide. The images are +/-1500px high. Result e.g.: http://awesomescreenshot.com/0e544q4l08

I want to position the image. When I cropp it to a smaller heigt (e.g. 2000x500px) the picture is all blown up.: http://awesomescreenshot.com/03044q570e

Do you have any advise for sizing and positioning parallax images?
Thank you.

Regards, Myra

Reply To: Size and positioning parallax images

Astrid — Mon, 05 Jan 2015 09:25:09 +0000

This reply has been marked as private.

Reply To: Size and positioning parallax images

Christopher — Mon, 05 Jan 2015 12:08:14 +0000

Hi there,

Please add background-position: 50% 210px !important;height: 600px; in style field of content band 1.

Hope that helps.

Reply To: Size and positioning parallax images

Astrid — Tue, 06 Jan 2015 12:49:47 +0000

Thanks. Unfortunately that doesn’t give the result I was looking for. The height must stay 300px high. And the picture is still blown up.

Besides that, I was looking for a solution/answer for all the parallax images, because on every page on this website (except home and blog) there is a parallax page but sizing and positioning is difficult.

Regards, Myra

Reply To: Size and positioning parallax images

Christopher — Tue, 06 Jan 2015 13:24:03 +0000

Hi there,

Feel free to reduce the height, Keep above CSS and add background-size: 100%; as well.

Thank you.

Reply To: Size and positioning parallax images

Astrid — Tue, 06 Jan 2015 14:15:50 +0000

Ahhh now it’s working. Thank you.
Only difference with the other parallax images is that this one is fixed.
The other images move slowly when scrolling.

Is it difficult to make this the same?

Reply To: Size and positioning parallax images

Christopher — Tue, 06 Jan 2015 15:52:07 +0000

Hi there,

Since we forced the image position with CSS above , No it’s not possible to have both smooth scrolling and positioning.

Thank you.

Reply To: Size and positioning parallax images

Rich A — Fri, 09 Jan 2015 17:42:52 +0000

I’ve struggled with this issue as well. No matter the size of the background image, using the parallax effect causes it to be blown up often to an unacceptable size. I don’t see this issue with other themes.

I understand that this has to do with the site being responsive, however having to customize settings for individual pages/images isn’t convenient. Is there a way to ensure that images aren’t enlarged even more…a global setting of some sort?

FWIW the images I’m using are generally a minimum of 1700px X 800px or so. That should be large enough that they’d only need to be scaled up slightly for the largest monitors.

It’s very frustrating to add a good, clear image as a background only to have it resized to a point where the focal part of the image is lost and/or becomes blurry and useless. I see this issue pop up regularly here so I’m pretty sure it’s of concern to many.

Any advice would truly be appreciated.

TIA!

Reply To: Size and positioning parallax images

Astrid — Fri, 09 Jan 2015 19:08:08 +0000

Hi Rich,

I agree, that pictures are blown up isn’t normal. But with help from Support, I have managed.
I use now:

background-position: 50% 100px !important;height: 350px;background-size: 100%;

The image doesn’t blow up anymore. You can adjust the numbers according to your needs. Maybe this is helpful.

Big disadvantage: the image stays fixed! But nice enough for my client 🙂

Grtz!

Reply To: Size and positioning parallax images

Friech — Sat, 10 Jan 2015 02:06:41 +0000

Hi there,

Glad to hear you sort things out, let us know if you have any other question regarding the theme.

Cheers!