Background Scaling



Important! Remember to size-optimize your presentation images for the Web.

Image delimiter syntax supports a size parameter that gives you complete control over background image sizing and scaling.

The size paramter can take any value that is valid on the background-size css property. These values include auto, contain, cover, w% h%, auto h%, etc. If the size parameter is not specified, the default scaling value for background images is 100% 100%.

Background image sizing and scaling can be extremely useful for working with image assets that do not share a common aspect-ratio with each other, or do not share a common aspect-ratio with the presentation itself.


Learn By Example

This PITCHME.md markdown snippet:

---?image=assets/img/monkey.jpg&size=50% 100%&color=lightgray

### Handle image aspect ratios that differ from your slideshow

Results in the rendering of the following slide:

ASPECT-RATIOS

Click on the above image to view this slide within a live GitPitch presentation.


Image Delimiter Scaling Syntax - Contain Image

The following syntax demonstrates how to contain a local background image within a slide:

---?image=assets/bg.jpg&size=contain

Containing the background image causes it to be resized to make sure the entire image is fully visible within the slide.


Image Delimiter Scaling Syntax - Cover Image

The following syntax demonstrates how to cover a local background image within a slide:

---?image=assets/bg.jpg&size=cover

Covering the background image causes it to be resized to cover the entire slide, even if it has to stretch the image or cut a little bit off one of the edges.


Image Delimiter Scaling Syntax - Fit Tall Image

By default, the aspect-ratio for a slide within a presentation is 16:9. But sometimes we need to work with images that are taller than they are wide. The aspect-ratio of such images is at odds with the aspect-ratio of the slide on which they will be displayed.

Such background images must be scaled to fit within a slide. While simulataneously maintaining the original aspect-ratio of the background image to prevent image skew or distortion.

The following syntax demonstrates how to scale and fit a tall local background image within a slide:

---?image=assets/bg.jpg&size=auto 90%

Fitting the tall image causes it to be scaled and constrained to 90% of the height of the slide. The width of the background image is automatically calculated to preserve the original aspect-ratio of the image.


Image Delimiter Scaling Syntax - Squeeze Image

By default, an image specified on an image delimiter will fill the entire background of the associated slide. To add padding between the edge of the slide and the edge of the background image - effectively squeezing the image - we must scale the image to fit within a reduced area of the slide.

The following syntax demonstrates how to squeeze a local background image within a slide:

---?image=assets/bg.jpg&size=80% auto

Squeezing the background image causes it to be scaled and constrained to occupy just 80% of the width of the slide. The height of the background image is automatically calculated to preserve the original aspect-ratio of the image. The result is an image centered on the slide with a 10% border on either side of the image.


Important! Remember to size-optimize your presentation images for the Web.