With Cascading Style Sheets (CSS), you can style your site and transform the related images. For example, you can create static or sticky positioning for the graphics, define backgrounds and borders, resize, and create cool filters to show off the artistry.
CSS offers numerous options for those tasks. Gratifyingly, CSS supports many image formats and types, including raster images (like JPEG), vector images (like SVG), combination images (like ICO), and fileless images (like CSS gradients).
Image transformation in CSS is based on the <image> data type, which can take the form of HTML elements,
<url> or <gradient> CSS data types, or element(), Image(), cross-fade(), or image-set() functions. After defining an image, you can transform it by setting CSS properties, as described in this article.
Here are the topics:
- Positioning
- Backgrounds
- Borders
- Resizing
- Filters
- Effects
- Transformations With Cloudinary
- Additional Resources
Positioning
The position property specifies how to render webpage elements, including images, by defining them as static, relative, fixed, absolute, or sticky.
To specify an image’s position, set the right, left, top, or bottom property. Those properties support the values auto, length, %, initial, and inherit, which define how the property affects positioning.
Static
HTML elements are assigned a static position by default. You cannot configure the placement properties (right, left, etc.) for a static position. Static images stay inline with the page content as the user scrolls through the page.
Relative
You assign elements a relative position to move them away from their normal position without other elements filling any gap that is left. Images positioned as relative stay inline with the flow of your page content as the user scrolls.
See this example snippet:
Fixed
Images assigned a fixed position are placed in a location relative to your user’s viewport and do not move along with the page content. For example, the code below positions an image in the bottom right corner of the user’s browser, causing the image to overlap other content on a scroll. No gap is left where the content would be if positioned otherwise.
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}Absolute
An absolute position assigned to images places them relative to their nearest positioned parent. If no wrapping elements are positioned, the image is placed relative to your document body, moving with the content as the user scrolls. See this example snippet:
Sticky
Sticky images are positioned according to the user’s scrolling behavior. They start out relatively positioned in their container, transitioning to fixed positions when a position is met. For example, sticky positioning keeps an image visible even after the user has scrolled past where the image was first displayed.
Note: sticky positioning does not work in Internet Explorer and Edge 15 and its earlier versions.
Here’s an example snippet:
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}Backgrounds
You specify the CSS property background-image to set one or more images, including the child elements for your page and the <main> or <body> element, as an element’s background. By default, background images are placed in the top-left corner both horizontally and vertically.
To change the background image’s defaults, set the background-repeat, background-position, and background-attachment properties. Set background-color as a fallback in case your image fails to render.
See this example snippet:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
background-color: purple;
}Borders
To create a border for an image, set the border property and the style, color, and width options. Feel free to mix and match the style options with all four sides of your border and set a different style for each side with a separate border-style property. For example:
You can also add borders that are images with the border-image property by referencing the images. Because each image is sectioned into a nine-piece grid, you can define where the gridlines fall and whether to stretch or repeat the middle segments. For example:
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://i.stack.imgur.com/sjbeu.png) 30 round;
}Resizing
You can resize images in CSS in three ways: absolutely, proportionally, and relatively, by modifying the images’ height and width properties.
Absolute Resizing
To resize images absolutely, specify their dimensions as static measurements, such as pixels or ems, regardless of the original dimensions. For example:
Note: If the dimension values you specify are not proportional to the original, your image will appear warped.
Proportional Resizing: Retention of Aspect Ratio
Resizing an image proportionally involves statically modifying its height or width property and setting the other to auto. That way, you maintain the image’s original aspect ratio. For example:
Relative Sizing
You can resize an image in relation to its parent element or the viewport. Typically, you also set the object-fit property to define whether the image should stretch. For example:
For more details, see the article Image Resizing: Manually With CSS and Automatically With Cloudinary.
Filters
You can change an image’s color profile, clarity, opacity, etc. with CSS filters, which perform basic edits directly in CSS rather than through an image editor. Here’s the standard syntax:
filter-me {
filter: <filter-function> [<filter-function>]* | none
}
.filter-me {
filter: blur(10px);
}Following are the effects you can choose for image filters:
| Name | Effect |
|---|---|
| blur() | Applies a Gaussian blur. | brightness() | Changes the brightness of the image. | contrast() | Changes the image contrast. | drop-shadow() | Adds a shadow behind the image. | grayscale() | Colors the image black and white. | hue-rotate() | Changes the image’s base hue. | invert() | Inverts the image colors. | opacity() | Changes the image’s transparency. | saturate() | Changes the image’s color saturation. | sepia() | Makes the image sepia toned. |
For more details, see the article Creating Image-Filter Effects With CSS and Riveting Transformations.
Effects
You can create elaborate effects or compound changes for images with CSS. Examples are rounded corners, placeholders or thumbnails, responsive sizing, and transformations, such as skewing.
Rounded Corners
A rounding configuration through the border-radius property makes images appear softer or circular. Additionally, you can set uniform image corners or corners with separate properties to create an ellipse or obloid.
For example, to create a slightly rounded shape:
To create an ellipse or circle:
Thumbnails
Image thumbnails, which often serve as previews or placeholders for elements, are set apart with borders, text, or other effects. The code example below creates a small image with round corners and a gray border to denote interactivity, setting the image apart from other elements.
For more details, see the article CSS Image Effects: Five Simple Examples and a Quick Animation Guide.
Responsive Sizing
Responsive images resize according to your user’s viewport size. You can create them by defining their width as a percentage of the viewport width, as in the example below, or by programming in CSS and JavaScript with media queries.
For more details, see the article How to Create Images for Responsive Web Design.
Transformations
You can transform images by setting their scale, skew, rotate, or perspective parameter through the transform property. Furthermore, combining transform with JavaScript or animation modules creates movement or rotational images.
However, because browsers do not yet fully support the transform property, you must add prefixes to ensure compatibility, as in this example:
img {
-webkit-transform: rotate(20deg) skewY(20deg); /Chrome, Safari, Opera/
-moz-transform: rotate(20deg) skewY(20deg); /Firefox/
-ms-transform: rotate(20deg) skewY(20deg); / Internet Explorer /
}For compatibility with Internet Explorer, add the following:
img {
-webkit-transform: rotate(20deg) skewY(20deg); /Chrome, Safari, Opera/
-moz-transform: rotate(20deg) skewY(20deg); /Firefox/
-o-transform: rotate(20deg) skewY(20deg); / Internet Explorer /
-ms-transform: rotate(20deg) skewY(20deg); / Internet Explorer /
-sand-transform: rotate(20deg) skewY(20deg); / Internet Explorer /
}Transformations With Cloudinary
A cloud-based service for managing images and videos, Cloudinary offers a generous free-forever subscription plan. While on that platform, you can upload images and apply built-in effects, filters, and modifications. You can also create image effects that are difficult or impossible to produce with just CSS.
Additionally, you can transform images programmatically with SDKs or simple URL parameters. Cloudinary applies changes dynamically, leaving your original images intact. That means you can modify images on the fly as your site design evolves and as you support more devices and screen sizes—a huge convenience and time saver.
Additional Resources
The Cloudinary site contains many informative articles on CSS images. Below are a few examples.
Basic and Bonus CSS Image-Overlay Effects
Overlays deliver special effects to images with text or other graphic elements, such as captions, banners, and menus, sparking appeal and interest.
The article CSS Image Overlays: Overlaying Text and Images for Visual Effect explains how to overlay text on images, how to make image text readable, how to add transparent overlays, and how to create image effects in Cloudinary.
Image Resizing: Manually With CSS and Automatically
Resizing images fits them to your site layout for a positive user experience. You can resize statically or dynamically, enabling your site to adapt to user preferences and devices.
The article Image Resizing: Manually With CSS and Automatically With Cloudinary shows you how to resize images and backgrounds with CSS and how to crop, resize, and rescale images through automation with Cloudinary.
CSS Image Effects
By applying CSS image effects, you can modify images before they are rendered on your site, saving you a load of manual editing effort. The same images can then be displayed across your site but with different effects.
The article CSS Image Effects: Five Simple Examples and a Quick Animation Guide describes how to create basic image effects with CSS, how to produce hover effects, how to animate images, and how to dynamically generate effects with Cloudinary.
CSS Image Filters
Filters are tools that can completely change the appearance of your images. For example, you can modify color schemes, make images transparent, and layer effects to create 3D elements.
The article Creating Image-Filter Effects With CSS and Riveting Transformations describes the filter effects that are available and chronicles how to apply them. In particular, you’ll learn how to do that easily with Cloudinary.
JavaScript Image Rotation
Flipping or rotating images can add interactivity to your site’s media, e.g., dynamically reference user actions, such as mouseovers or clicks, and drastically change the site’s look and feel.
The article Rotating Images in JavaScript: Three Quick Tutorials details how to dynamically rotate and flip images with JS and how to simplify that process with Cloudinary.
JavaScript Resizing Tricks and Tips
Through resizing, you can better fit images in your page layout, raise the appeal level of the content, and improve your site performance. However, resizing a multitude of images can be a chore.
The article Cool Tricks for Resizing Images in JavaScript describes how to resize images through automation during upload, how to create an eye-catching zoom effect with JS, and how to resize and rescale images—all with Cloudinary.
