Center parallax image

5 replies · opened Apr 2, 2022

Mmbostwick1Apr 2, 2022

Hello,

I am looking to center and scale the parallax image. I'd prefer it to not only center but also somewhat maintain most of the image. Doesn't need to be 100%. I've tried multiple things and just can seem to figure it out.

Any help would be greatly appreciated.

Mmbostwick1Apr 2, 2022

I swear. It hit me right after I pressed the post button. All good here. Sorry to waste your time!

Mmbostwick1Apr 2, 2022

QQ if you see this. Same link as above. I'd love to adjust the height on the parallax area so its seamless when scale down to mobile. Please let me know if this is something you can help me with. Basically so you can see where the image starts and ends. If that makes sense.

SSemicolon WebSTAFFApr 4, 2022

Hello,

Thanks for your Patience!

Can you please let us know which Parallax Image are you looking to scale?

Additionally, the Background Image is resized according to the size of the available area for the best fit. You may consider using a different image for responsive devices based on your Image requirements as it may work best in this case. Example:

[ch_pre type="css"].device-xl .parallax { background-image: url('image.jpg') !important; }

.device-lg .parallax { background-image: url('image.jpg') !important; }

.device-md .parallax { background-image: url('image.jpg') !important; }

.device-sm .parallax { background-image: url('image.jpg') !important; }

.device-xs .parallax { background-image: url('image.jpg') !important; }[/ch_pre]

Additionally, you can also consider using a different background-position CSS Property like center center for different devices as mentioned above.

This will definitely work fine. The Responsive Classes are as follows:

.device-xl – Class for Large Devices >=1200px

.device-lg – Class for Medium Devices >=992px to 1199px

.device-md – Class for Tablets

.device-sm – Class for Landscape Mobiles or Phablets.

.device-xs – Class for Portrait Mobiles

You can use the above code for other Elements as well in the Slider.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Mmbostwick1Apr 4, 2022

Incredible. Thank you so much for getting back to me!

SSemicolon WebSTAFFApr 5, 2022

Hello,

Very Happy to Help! :)

Please do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard