[RadModerator]

Hi Philip,

The same as your home page template, you can make your images or background set to full-width by selecting Blank – No Container | Header, Footer template under Page Attribute section.

Cheers!

[byronic1@att.netParticipant]

I’ve been wrestling with this problem also. My background images seem to be enlarged beyond normal expectation.

I have an additional issue to ask about: if the image must remain centered, do I need to add image on the left (for instance) if the center of the image is too far to the left now?

Specifically I am asking about Renew 9, where there is a sidebar. The image seems to be centered on the site as a whole, rather than the room left over by the sidebar (http://prntscr.com/77kdl5)
The dummy content that says 1200x500px is centered in the space left over after the sidebar is subtracted. Why doesn’t my image do that?

[ChristianModerator]

Hey there,

Please give us the URL of your site and access to your WordPress admin so we could see your setup.

Thanks.

[byronic1@att.netParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for writing in.

That’s the effect of parallax, it will try to scale up images greater than the container size for it to form negative space required for moving effect. And scaling depends on screen size too, as for my end, it appears as a big squared image.

Your only choice is to disable your parallax image, the other problem is mixing the fixed left navigation with parallax. Fixed positioning takes up the window size, thus parallax ignore the navigation width, instead, it follows the window size.

———————————-

You can use this solution.

Have two image:
a. Image with additional blank space on left with the size of 290px (the width of left navigation).
b. Original image with no additional space on left

Add this css at your customizer’s custom css under Admin > Appearance,

@media (min-width: 980px) { /* Desktop */
.parallax_with_special_background {
background-image: url(http://domain.com/image_with_290px_blank_space_on_left.jpg) !important;
background-size: 100% auto !important;
}
}
@media (max-width: 979px) { /* Tablet/Mobile */
.parallax_with_special_background {
background-image: url(http://domain.com/image_without_290px_blank_space_on_left.jpg) !important;
background-size: 100% auto !important;
}
}

Then at your selected content band where parallax is, add parallax_with_special_background on its class attribute/option.

Eg.

[content_band class="parallax_with_special_background" parallax="true" ]

You will have to repeat each step if you wish to apply different images on different content band, with different class name.

Hope this helps.

[Moritz OParticipant]

Thanks for this thread, it has helped me to display the parallax image in a nice way. Problem is that on mobile, the text on the parallax image moves down and is displayed above text in the section below. Do you have an idea how to solve this issue?
url is: http://saritofuhrmann.de/
thanks,
Moritz

[ZeshanMember]

Hi Moritz,

Thanks for updating the thread!

I’ve checked your site, and the text is in its place, but the image is changing its height. This is the same problem, and if you use above provided workaround, it may not work correctly in your situation. What you can do here is to set the background image size back to ‘cover’ on smaller screens using following CSS code:

@media only screen and (max-width: 1050px) {
  .home #x-section-1 {
    background-size: cover !important;
  }
}

Thank you!

[Moritz OParticipant]

Thanks for your reply (hadn´t seen it before).
Unfortunately this does make the image bigger on smaller screens but the tex overlay ist still moving down and is positioning above the text below. I think that using a normal parallax image might not have been the best choice for what I wanted to achieve. Do you think a slider image would work better? (I also have other issues with this solution that I can´t solve: https://community.theme.co/forums/topic/problems-with-header-transparency/)
thanks for your help!
Moritz

[ZeshanMember]

Hi Moritz,

That is because you have applied a fixed height to that section (see: http://prntscr.com/amqz07). It’s not advisable to use fixed heights in responsive design because of the fact that elements change their size differently depending on the screen size. Please remove the fixed height and the issue should be resolved.

If you want to apply perhaps a minimum height, use this CSS code instead:

min-height: 369px

It will apply a minimum fixed height to the element without affecting its responsive behaviour.

Thank you!

[Author]

Posts