New Captivate – Slide background vertical alignment

[SebastienV]

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

[kdmemory]

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.

[SebastienV]

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]

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).