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;
}

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

Global Study Strengthens Case for Brands to Support UGC

However, along with the benefits of user-generated content (UGC), comes myriad technical challenges. Content must be moderated to avoid compromising your brand. You need to provide a user-friendly process to efficiently manage content uploads. You need to transform images and videos to ensure brand consistency and web performance. You also need to ensure they look presentable across all devices and browser environments. To help brands address these issues and more, we recently ran a three-part blog series on UGC.

Read more
Cloudinary Supports JPEG XL

Since its founding, Cloudinary's mission has been to help companies unleash the full potential of their media to create the most engaging visual experiences. In keeping with that quest, we support new codecs for images and videos as soon as possible.

Read more
WingTai Asia Fashions Efficient Media Management Workflow

WingTai Asia, a subsidiary of Wing Tai Holdings Limited, is an investment holding company that focuses on property investment and development, lifestyle retail, and hospitality management in key Asian markets. The company is a licensed distributor or sole license distributor for many brands, including Adidas, Cath Kidson, TopShop and UNIQLO, and operates brick and mortar shops to sell these goods throughout Singapore and Malaysia.

Read more