# ComboStrap UI - Images

image is a inline component that permits to show raster or svg images from your media library in your pages.

All images:

## Supported Image Type

ComboStrap supports:

## Syntax

ComboStrap uses:

{{[ ]path?WxH&nolink&att=value[ ]}}


where:

• path is:
• for an internal image: the internal path of the dokuwiki
• for an external image: the URL.
• W is the width (0 if you don't want to set it)
• H is the height (Optional)
• [ ] are optional spaces that indicates the alignement of the image (left, center, or right float)
• att=value is one or more styling attributes

## Example

### Resize to a given width

To resize to a given width, add a number.

Example of an image resized to 400px

{{:docs:block:stock_image_surfer_in_the_see.png?400|}}


Raster images are automatically resized below the screen size. For more information, see the Raster - Automatic Resizing feature

### Resize to a given height

To resize to a given height, set a width to 0 followed by the height.

Example of an image resized to 250px height

{{:docs:block:stock_image_surfer_in_the_see.png?0x250|}}


### Position

• To position the image to the left, let no space, this is the default
• To position the image to the center with a center block, let a space at the left and at the right
• To position the image to the right with a right float, let a space at the left

Example: position the image to the right with:

• a width of 300
• and a padding of 3 (p-3) with spacing
{{ :docs:block:stock_image_surfer_in_the_see.png?300&spacing=p-3&background-color=white|}}


If you want more control on position, we advise you to use the grid and its cells.

### Styling Attributes

You can style even further your image with styling element:

For instance, to elevate this photography with a surfer, you could use this syntax.

{{ :docs:block:stock_image_surfer_in_the_see.png?400&onHover=float&shadow=lg |}}


### Background

You can also use the image as background.

<slide color="steelblue" text-align="center" >
<background opacity="0.3">{{:docs:block:stock_image_surfer_in_the_see.png|}}</background>
<text lead font-size="h3">A background image will emphase a short message.</text>
</slide>


## A background image

A background image will emphase a short message.

## Support

### Cropping

cropping works only for raster image but does not get any extra features such as lazy loading and styling.

Example of an image cropped to 200x200px

{{:docs:block:stock_image_surfer_in_the_see.png?200x200|}}


## Configuration

### imageEnable

This configuration permits to disable completely this component. It will also disable: