[Anja LParticipant]

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!

[Anja LParticipant]

This reply has been marked as private.

[Paul RModerator]

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;
}

[Anja LParticipant]

This reply has been marked as private.

[ZeshanMember]

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!

[Anja LParticipant]

This reply has been marked as private.

[ZeshanMember]

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.

[Anja LParticipant]

Thanks!

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

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

🙂

[Nabeel AModerator]

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!

[captsalamanderParticipant]

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!

[ZeshanMember]

Hi Captsalalander,

Thanks for writing in!

In that case, please try using following code instead under Custom > CSS in the Customizer:

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

Hope this helps. 🙂

Thank you.

[captsalamanderParticipant]

Sort of works. The problem is that the gap is different in each browser. To get it to work in Safari, the number has to be higher, which then leaves a white band at the top of the image.

I’m really struggling with this issue. I’ve attempted to crop my images in multiple ways, which never seems to be consistent when put into a background. In all cases, the content band crops off the sides of the image and zooms in. Using the “contain” CSS is the closest I can come to making this work, and now it’s different across browsers.

The other issue is that my other background images are being affected as well. Example: on my homepage I have background images in bands 6 and 8 (http://sigmastatus.com).

What is your suggestion of the best way to approach this? I was able to make homepage bands 6 and 8 look right because the bands were taller, but the “contain” CSS has inserted a white band at the top of those, which screws up their placement. Why doesn’t the band crop the top and bottom of the image instead of the sides?

Thanks for helping with this. It’s the last major issue I have to figure out to complete this site.

While I wait for your response I’ll see if I can crop the images to work with the current “contain” CSS.

[captsalamanderParticipant]

PS “Contained” combined with judicious cropping seems to work ok but requires a lot of trial and error, so if you have a suggestion, I’m all ears.

Thanks!

[Paul RModerator]

Hi,

Sorry to hear that you are having difficulty making this work.

The contain code scale the image to the largest size such that both its width and its height can fit inside the content area.
by using it you need to make sure your original image size is bigger or equal with the width of the container to prevent it
from being blurry.

Because every background image looks different I am sorry but the only way to make it work is to crop the image and adjust it’s background position to make it look the way you want.

Thanks

[captsalamanderParticipant]

Thanks.

[Author]

Posts