Skip to main content
Known Participant
December 19, 2023
Question

New Captivate – Slide background vertical alignment

  • December 19, 2023
  • 1 reply
  • 1297 views

Hello,

As a beginner with the new Captivate, I'm trying to set up an initial basic training course to better understand the possibilities and I'm already stuck on a feature that seems rather obvious to me.

I simply want to insert an image of coloured waves and have this image aligned vertically with the top edge of the slide.

And I'm trying all the different possible settings, but none of them gives the right result (see screenshots). Either the image is distorted, enlarged or badly positioned.
If anyone has any ideas or suggestions for solving this problem, I'd love to hear from you 😉

Thanks in advance, Sébastien

 

This topic has been closed for replies.

1 reply

kdmemory
Inspiring
December 19, 2023

Hi Sebastien

create a background image (your waves) with the dimensions of 1366x768 pixels (that's the default slide size in the new Captivate), select it as Slide Background and set the Display to Fill. That produces also the most acceptable backgrounds for tablet and mobile viewports.

Known Participant
December 19, 2023

Hello kdmemory, thanks for help,

I understand the principle (I had this idea at the start) but it only works if the slide keeps this ratio. As soon as the content forces the slide to resize vertically, the image is enlarged and no longer falls in the same place.
What I'm having a bit of trouble understanding is that if the new Captive is based on HTML5 and CSS with React components, it's normally quite simple to fit the background in width and align it vertically at the top. This is a fairly classic web design effect that it should be possible to reproduce in Captivate.
The 'Fit' option should be accompanied by a vertical alignment setting.

And, as it stands now, I really don't understand the logic behind the vertical alignment of the 'Fit' option??!  (see last screenshot)

 

kdmemory
Inspiring
December 19, 2023

In your last screenshot the Display setting is set to Fit. Set it to Fill and it should look alright. What it tries when set to fit is a wider background image (1366px) attempts to FIT into a narrower viewport proportionally. That leads to a decrease in height to keep the proportions. Then, so it seems, the fit image is resized to about 768x432px (if the new viewport width is i.e. 768px) and this smaller size is vertically middled which causes the empty space at the top (and bottom).