Image

Add an Image

Use html:img to add images with specific height or width.

Width Only

The below example has set the width of the image to 100%, and therefore, the height is determined based on the image's height at the width of 100%.

:: html:img(src: "/images/galaxy.jpg", width: "100%")

Height Only

And the following example has set the height to 150px and the width to an empty string which means that the width will be automatically determined based on the width of the image at the height of 150px. In short, when either width/height is empty, the missing dimension is calculated to maintain the image's aspect ratio.

:: html:img(src: "/images/galaxy.jpg", width: "", height: "150px")

Width and Height

Setting both width and height will force the dimensions to match the specified width and height, which may change the image's proportions. If your desired behavior is to fit the image in a specific width and height without altering its aspect ratio, you should use image:backround instead.

The bellow example has set the width to 300px and the height to 150px, and as a result, has stretched the image horizontally.

:: html:img(src: "/images/galaxy.jpg", width: "300px", height: "150px")

Add a Backgorund Image

image:background lets you add an image as a background to a container.

:: image:background(source: "/images/galaxy.jpg", width: "300px", height: "150px")

Position Backgorund Image

image:background lets you move the background image inside the container using the $image_horizontal_position and $image_vertial_position arguments.

For the cat picture from the previous example, we will adjust the $image_vertial_position to 75% to position the cat more in the container.

:: image:background(source: "/images/galaxy.jpg", image_vertial_position: "75%", width: "300px", height: "150px")

Change Backgorund Image Size

image:background gives you all the HTML accepted options for setting background-image size such as cover (default), contain, percentages (250%), etc using the $image_size argument.

In the below example, we have set the $image_size to "contain", which will fit the image inside the container's specified height and width.

:: image:background(source: "/images/galaxy.jpg", image_size: "contain", width: "300px", height: "150px")

Create Parallax Backgorund Image

Set image:background's $parallax argument to TRUE, and your background-image will move at a different speed than the foreground content.

:: image:background(source: "/images/galaxy.jpg", parallax: TRUE, width: "300px", height: "150px")

Add Overlay Text on Backgorund Image

Using $overlay_text, you can a text that will over the image positioned right at the center.

The Overlay Text

:: image:background(source: "/images/galaxy.jpg", overlay_text: "The Overlay Text", width: "100%", height: "300px")

You can set the overlay opacity and the overlay color. In the below example, we have set the overlay layer color to blue and the overlay's opacity to 75%.

The Overlay Text

:: image:background(source: "/images/galaxy.jpg", overlay_text: "The Overlay Text",  overlay_color: "blue", overlay_opacity: .75, width: "100%", height: "300px")
Copyright © SunSed LLC 2013-2021 All rights reserved.