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.
This is part of an extensive series of guides about Front-End Development.
Here are the topics:
- Positioning
- Backgrounds
- Borders
- Resizing
- Filters
- Effects
- Transformations With Cloudinary
- Additional Resources
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.
Additionally, the align and float properties can be employed to align and float images to specific locations on the page, giving more flexibility and control over the placement of images. If you’re looking to overlay text on these images, set the image to position:relative and the text’s to position:absolute. This will allow you to place text directly over an image.
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.
.static {
position: static;
border: 3px solid #73AD21;
}
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:
.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
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;
}
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:
.absolute {
position: absolute;
top: 80px;
right: 0;
border: 3px solid green;
}
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;
}
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;
}
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:
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:
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://i.stack.imgur.com/sjbeu.png) 30 round;
}
Additionally, you can shape images using the border-radius property. This is particularly useful if you want to insert images in a circle or a rectangle. By setting a 50% border-radius, you can easily achieve a circular image.
To resize images absolutely, specify their dimensions as static measurements, such as pixels or ems, regardless of the original dimensions. For example:
img{
height: 100px;
width: 200px;
}
Note: If the dimension values you specify are not proportional to the original, your image will appear warped.
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:
img{
height: 100px;
width: auto;
}
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:
img{
height: 100%;
width: 100%;
object-fit: contain;
}
For more details, see the article Image Resizing: Manually With CSS and Automatically With Cloudinary.
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);
}
Speaking of blurring, if you’re overlaying text on an image and want to make it more legible, consider blurring part of the underlying image. This effect draws attention to the text and ensures readability.
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. |
With the background-image property, you can set an image as a background for any element. This is perfect for creating banners, section dividers, or even styling text.
You can style the text that overlays these background images by using properties like background, color, and filter. For instance, you might want to have a semi-transparent text background or alter the text color to ensure contrast and visibility. Also, adding a subtle text-shadow can make the text pop and provide depth.
Learn more in our detailed guide to css stretch background image.
Creating shapes in CSS is simplified with properties like border-radius, which can transform a square div into a circle or an ellipse, depending on the values you choose.
Remember that if you wish to position an image and a piece of text on the same line, you can use the <p> tag with the style attribute set to display:inline-block. This is a handy technique to maintain the flow of your content.
For more details, see the article Creating Image-Filter Effects With CSS and Riveting Transformations.
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.
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:
img {
border-radius: 15px;
}
To create an ellipse or circle:
img {
border-radius: 50%;
}
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.
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 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.
img {
max-width: 70vw;
height: auto;
}
For more details, see the article How to Create Images for Responsive Web Design.
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 /
}
With a combination of CSS properties, you can also create more complex designs, like clipping paths, gradients, and animations, to make your images and text stand out.
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.
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.
Together with our content partners, we have authored in-depth guides on several other topics that can also be useful as you explore the world of front-end development.
Authored by Cloudinary
- 5 Techniques and Examples for Creating Responsive Images in CSS
- 3 Ways to Generate Responsive Image Backgrounds
- Responsive Images in HTML: A Practical Guide
Authored by Cloudinary
- The Five Most Popular Web-Video Formats and Streaming Protocols
- The Popular Video Codes, Their Pros and Cons, and Related File Formats
- How the AV1 Codec Compresses Video for Efficient and High-Quality Delivery
Authored by Cloudinary
