Cloudinary Blog
Working With CSS Images

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

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.

Copy to clipboard
.static {
  position: static;
  border: 3px solid #73AD21;
}

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:

Copy to clipboard
.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

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.

Copy to clipboard
.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:

Copy to clipboard
.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  border: 3px solid green;
}

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:

Copy to clipboard
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Sign up for Cloudinary free today!


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:

Copy to clipboard
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:

Copy to clipboard
img {
  width: 270px;
  border: 1px solid black;
}

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:

Copy to clipboard
#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:

Copy to clipboard
img{
  height: 100px;
  width: 200px;
}

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:

Copy to clipboard
img{
  height: 100px;
  width: auto;
}

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:

Copy to clipboard
img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

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:

Copy to clipboard
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:

Copy to clipboard
img {
  border-radius: 15px;
}

To create an ellipse or circle:

Copy to clipboard
img {
  border-radius: 50%;
}

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.

Copy to clipboard
img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

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.

Copy to clipboard
img {
  max-width: 70vw;
  height: auto;
}

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:

Copy to clipboard
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:

Copy to clipboard
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.

Recent Blog Posts

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

David first shared his thoughts at our ImageCon coverence last October and this case study is an abbreviated version of Minted’s success using Cloudinary.

Over time, Faithful renderings of the creations of the illustrators, textile designers, painters, packaging designers, marketers, and stay-at-home moms, all of whom are core contributors of the Minted world, was getting harder and harder. Legacy technology wasn’t cutting it any more—and it was time for Cloudinary to step in.

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more

New for DAM: Media Library Extension for Chrome

By Sharon Yelenik
A New Media Library Chrome Extension for Cloudinary DAM

With the introduction of the Media Library Extension, a Chrome-browser add-on that streamlines the access to, search for, and management of images and videos, Cloudinary offers yet another effective tool for its Digital Asset Management (DAM) solution. Let’s have a look at how most teams are currently working with media assets and how the new add-on not only boosts efficiency, but also renders the process a pleasure to work with.

Read more
New Features Supercharge Cloudinary’s Digital Asset Management Solution.

Today, I’m thrilled to announce the launch of Apps for Digital Asset Management and a Media Library Extension for the Chrome browser, which enables easy, flexible integration with all web-based applications in addition to making asset discovery more robust and accessible to all.

Read more
Scale and Automate Workflows With Modern Digital Asset Management Systems

With building, growing, and maintaining a strong digital presence being a top priority for all brands, high-quality visual content is paramount. In fact, consumers are 40 times more likely to share visual content on social networks than on other forums. Plus, a recent study from Wyzowl found that 84% of consumers made purchase decisions after watching a video, which explains why many brands are adding more and more visual media to their sites.

Read more