[AstridParticipant]

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

[AstridParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

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

Hope that helps.

[AstridParticipant]

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

[ChristopherModerator]

Hi there,

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

Thank you.

[AstridParticipant]

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?

[ChristopherModerator]

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.

[Rich AParticipant]

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!

[AstridParticipant]

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!

[FriechModerator]

Hi there,

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

Cheers!

[Rich AParticipant]

Thanks for that Myra. I tried those settings (and numerous variations) and it did resolve the “blow up” issue, but it wrecked havoc on the responsiveness of the page..and mobile.

So back to the drawing board.

I still don’t understand why using the parallax feature causes images to be blown up so large using X.

Thanks again though!

[RadModerator]

Hi Rich,

Parallax backgrounds are meant to be moving against scroll and content. That gives the effect of smooth nudging while scrolling.

And in order that to work, background position and size are dynamically computed. If background image’s size is the same as your container then moving and scrolling is no use at all. Why? because you don’t need to see what’s hidden from clipped area since they are being shown 100%.

It’s the same concept of browser’s scrollbar. Scrollbars and scrolling is only possible if you have content more than your browser’s size. Because if your content is small enough to see 100%, then there is no need for scrolling.

The css above make image size 100% same as the container, which also prevent the image from moving (smooth nudging effect).

Why both width and height needed to be scaled up? Because if width is 100%, while height is changing then it will be stretched and aspect ratio will be altered.

What I usually do is create an image with big empty spaces (background space) on all sides, so when used as parallax, the design elements are still on the center and background spaces are being hidden while maintaining smooth movement. Or use the css like given above.

Thanks!

[Rich AParticipant]

Thanks very much for that. I have tried playing around with “empty” backgrounds to achieve the effect you’ve recommended…with some success.

However for some reason X handles images used for parallax backgrounds differently than other themes in that the image size is increased a great deal more. This “over compensation” makes even the largest images much larger than they need to be even on the very largest monitors. That’s simply not the case with other (bootstrap based) themes.

I’m wondering if the developers can revisit how this works going forward so that the extra work to improve their appearance is not required? It should cut down on the numerous support requests on the subject.

Thanks again!

[Paul RModerator]

Hi Rich,

We certainly appreciate the feedback! This is something we can add to our bucket list. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[Philip WParticipant]

How do you get the image span the entire width of the webpage? It worked fine on my landing page (demo) but I can’t get it to repeat on my other pages.

http://mckennawoolley.com/

[Author]

Posts