{"id":22217,"date":"2020-11-03T01:47:23","date_gmt":"2020-11-03T01:47:23","guid":{"rendered":"http:\/\/working_with_css_images"},"modified":"2026-03-15T13:10:51","modified_gmt":"2026-03-15T20:10:51","slug":"working_with_css_images","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/working_with_css_images","title":{"rendered":"Working With CSS Images"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>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.<\/p>\n<p>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).<\/p>\n<p>CSS picture transformation (aka CSS image transformation) is based on the <code>&lt;image&gt;<\/code> data type, which can take the form of <strong>Error! Filename not specified<\/strong>. HTML elements, <code>&lt;url&gt;<\/code> or <code>&lt;gradient&gt;<\/code> CSS data types, or <code>element()<\/code>, <code>Image()<\/code>, <code>cross-fade()<\/code>, or <code>image-set()<\/code> functions. After defining an image, you can transform it by setting CSS properties, as described in this article.<\/p>\n<p>This is part of an extensive series of guides about <a href=\"https:\/\/cloudinary.com\/guides\/front-end-development\/front-end-development-the-complete-guide\">Front-End Development<\/a>.<\/p>\n<p>In this article, we discuss CSS image management, including CSS pictures and CSS photos. Here\u2019s what we discuss in particular:<\/p>\n<p>Here are the topics:<\/p>\n<ul>\n<li>\n<a href=\"#positioning\">Positioning<\/a>\n<\/li>\n<li>\n<a href=\"#backgrounds\">Backgrounds<\/a>\n<\/li>\n<li>\n<a href=\"#borders\">Borders<\/a>\n<\/li>\n<li>\n<a href=\"#resizing\">Resizing<\/a>\n<\/li>\n<li>\n<a href=\"#filters\">Filters<\/a>\n<\/li>\n<li>\n<a href=\"#effects\">Effects<\/a>\n<\/li>\n<li>\n<a href=\"#cloudinary\">Transformations With Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"#resources\">Additional Resources<\/a>\n<\/li>\n<\/ul>\n<h2 id=\"positioning\">CSS Image Positioning<\/h2>  \n<p>The <code>position<\/code> property specifies how to render webpage elements, including images, by defining them as <code>static<\/code>, <code>relative<\/code>, <code>fixed<\/code>, <code>absolute<\/code>, or <code>sticky<\/code>.<\/p>\n<p>To specify an image\u2019s position, set the <code>right<\/code>, <code>left<\/code>, <code>top<\/code>, or <code>bottom<\/code> property. Those properties support the values <code>auto<\/code>, <code>length<\/code>, <code>%<\/code>, <code>initial<\/code>, and <code>inherit<\/code>, which define how the property affects positioning.<\/p>\n<p>Additionally, the <code>align<\/code> and <code>float<\/code> 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\u2019re looking to overlay text on these images, set the image to <code>position:relative<\/code> and the text\u2019s to <code>position:absolute<\/code>. This will allow you to place text directly over an image.<\/p>\n<h3>Static<\/h3>\n<p>HTML elements are assigned a <code>static<\/code> position by default. You cannot configure the placement properties (<code>right<\/code>, <code>left<\/code>, etc.) for a <code>static<\/code> position. Static images stay inline with the page content as the user scrolls through the page.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>.static {\n  position: static;\n  border: 3px solid #73AD21;\n}\n<\/code><\/pre>\n<h3>Relative<\/h3>\n<p>You assign elements a <code>relative<\/code> position to move them away from their normal position without other elements filling any gap that is left. Images positioned as <code>relative<\/code> stay inline with the flow of your page content as the user scrolls.<\/p>\n<p>See this example snippet:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>.relative {\n  position: relative;\n  left: 30px;\n  border: 3px solid #73AD21;\n}\n<\/code><\/pre>\n<h3>Fixed<\/h3>\n<p>Images assigned a <code>fixed<\/code> position are placed in a location relative to your user\u2019s 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\u2019s browser, causing the image to overlap other content on a scroll. No gap is left where the content would be if positioned otherwise.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>.fixed {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  width: 300px;\n  border: 3px solid #73AD21;\n}\n<\/code><\/pre>\n<h3>Absolute<\/h3>\n<p>An <code>absolute<\/code> 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:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>.absolute {\n  position: absolute;\n  top: 80px;\n  right: 0;\n  border: 3px solid green;\n}\n<\/code><\/pre>\n<h3>Sticky<\/h3>\n<p>Sticky images are positioned according to the user\u2019s scrolling behavior. They start out relatively positioned in their container, transitioning to fixed positions when a position is met. For example, <code>sticky<\/code> positioning keeps an image visible even after the user has scrolled past where the image was first displayed.<\/p>\n<p><strong>Note<\/strong>: <code>sticky<\/code> positioning does not work in Internet Explorer and Edge 15 and its earlier versions.<\/p>\n<p>Here\u2019s an example snippet:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>.sticky {\n  position: -webkit-sticky; \/* Safari *\/\n  position: sticky;\n  top: 0;\n  background-color: green;\n  border: 2px solid #4CAF50;\n}\n<\/code><\/pre>\n<h2 id=\"backgrounds\">CSS Image Backgrounds<\/h2>  \n<p>You specify the CSS property <code>background-image<\/code> to set one or more images, including the child elements for your page and the <code>&lt;main&gt;<\/code> or <code>&lt;body&gt;<\/code> element, as an element\u2019s background. By default, background images are placed in the top-left corner both horizontally and vertically.<\/p>\n<p>To change the background image\u2019s defaults, set the <code>background-repeat<\/code>, <code>background-position<\/code>, and <code>background-attachment<\/code> properties. Set <code>background-color<\/code> as a fallback in case your image fails to render.<\/p>\n<p>See this example snippet:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>body {\n  background-image: url(&quot;img_tree.png&quot;);\n  background-repeat: no-repeat;\n  background-position: right top;\n  background-attachment: fixed;\n  background-color: purple;\n}\n<\/code><\/pre>\n<h2 id=\"borders\">CSS Image Borders<\/h2>  \n<p>To create a border for an image, set the <code>border<\/code> property and the <code>style<\/code>, <code>color<\/code>, and <code>width<\/code> 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 <code>border-style<\/code> property. For example:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img {\n  width: 270px;\n  border: 1px solid black;\n}\n<\/code><\/pre>\n<p>You can also add borders that are images with the <code>border-image<\/code> 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:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>#borderimg {\n  border: 10px solid transparent;\n  padding: 15px;\n  border-image: url(https:\/\/i.stack.imgur.com\/sjbeu.png) 30 round;\n}\n<\/code><\/pre>\n<h2 id=\"resizing\">CSS Image Resizing<\/h2> \nYou can resize images in CSS in three ways: absolutely, proportionally, and relatively, by modifying the images\u2019 `height` and `width` properties.\n<p>Additionally, you can shape images using the <code>border-radius<\/code> property. This is particularly useful if you want to insert images in a circle or a rectangle. By setting a 50% <code>border-radius<\/code>, you can easily achieve a circular image.<\/p>\n<h3>Absolute Resizing<\/h3>\n<p>To resize images absolutely, specify their dimensions as static measurements, such as pixels or ems, regardless of the original dimensions. For example:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img{\n  height: 100px;\n  width: 200px;\n}\n<\/code><\/pre>\n<p><strong>Note<\/strong>: If the dimension values you specify are not proportional to the original, your image will appear warped.<\/p>\n<h3>Proportional Resizing: Retention of Aspect Ratio<\/h3>\n<p>Resizing an image proportionally involves statically modifying its <code>height<\/code> or <code>width<\/code> property and setting the other to <code>auto<\/code>. That way, you maintain the image\u2019s original aspect ratio. For example:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img{\n  height: 100px;\n  width: auto;\n}\n<\/code><\/pre>\n<h3>Relative Sizing<\/h3>\n<p>You can resize an image in relation to its parent element or the viewport. Typically, you also set the <code>object-fit<\/code> property to define whether the image should stretch. For example:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img{\n  height: 100%;\n  width: 100%;\n  object-fit: contain;\n}\n<\/code><\/pre>\n<p>For more details, see the article <a href=\"https:\/\/cloudinary.com\/blog\/image_resizing_manually_with_css_and_automatically_with_cloudinary\"><em>Image Resizing: Manually With CSS and Automatically With Cloudinary<\/em><\/a>.<\/p>\n<h2 id=\"filters\">CSS Image Filters<\/h2> \n<p>You can change an image\u2019s color profile, clarity, opacity, etc. with CSS filters, which perform basic edits directly in CSS rather than through an image editor. Here\u2019s the standard syntax:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>filter-me {\n  filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none\n}\n.filter-me {\n  filter: blur(10px);\n}\n<\/code><\/pre>\n<p>Speaking of blurring, if you\u2019re 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.<\/p>\n<p>Following are the effects you can choose for image filters:<\/p>\n<table class=\"table table-striped table-bordered\">\n   <thead>\n      <tr>\n         <th>Name<\/th>\n         <th>Effect<\/th>\n          <\/tr>\n   <\/thead>\n   <tbody>\n      <tr>\n         <td>blur()<\/th>\n         <td>Applies a Gaussian blur.<\/td>\n      <\/tr>\n         <td>brightness()<\/td>\n         <td>Changes the brightness of the image.<\/td>\n      <\/tr>\n         <td>contrast()<\/td>\n         <td>Changes the image contrast.<\/td>\n      <\/tr>\n         <td>drop-shadow()<\/td>\n         <td>Adds a shadow behind the image.<\/td>\n      <\/tr>\n         <td>grayscale()<\/td>\n         <td>Colors the image black and white.<\/td>\n      <\/tr>\n         <td>hue-rotate()<\/td>\n         <td>Changes the image\u2019s base hue.<\/td>\n      <\/tr>\n         <td>invert()<\/td>\n         <td>Inverts the image colors.<\/td>\n      <\/tr>\n         <td>opacity()<\/td>\n         <td>Changes the image\u2019s transparency.<\/td>\n      <\/tr>\n         <td>saturate()<\/td>\n         <td>Changes the image\u2019s color saturation.<\/td>\n      <\/tr>\n         <td>sepia()<\/td>\n         <td>Makes the image sepia toned.<\/td>\n      <\/tr>\n            <\/tbody>\n<\/table>\n<h3 id=\"image backgrounds\">Image Backgrounds<\/h3> \n<p>With the <code>background-image<\/code> property, you can set an image as a background for any element. This is perfect for creating banners, section dividers, or even styling text.\nYou can style the text that overlays these background images by using properties like <code>background<\/code>, <code>color<\/code>, and <code>filter<\/code>. 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 <code>text-shadow<\/code> can make the text pop and provide depth.<\/p>\n<p>Learn more in our detailed guide to <a href=\"https:\/\/cloudinary.com\/guides\/front-end-development\/6-ways-to-stretch-a-background-image-with-css\">css stretch background image<\/a>.<\/p>\n<h3 id=\"Shapes\">Shapes<\/h3>\n<p>Creating shapes in CSS is simplified with properties like <code>border-radius<\/code>, which can transform a square div into a circle or an <a href=\"https:\/\/cloudinary.com\/tools\/ellipse-crop-image\">ellipse<\/a>, depending on the values you choose.<\/p>\n<p>Remember that if you wish to position an image and a piece of text on the same line, you can use the <code>&lt;p&gt;<\/code> tag with the style attribute set to <code>display:inline-block<\/code>. This is a handy technique to maintain the flow of your content.<\/p>\n<p>For more details, see the article <a href=\"https:\/\/cloudinary.com\/blog\/creating_image_filter_effects_with_css_and_riveting_transformations\"><em>Creating Image-Filter Effects With CSS and Riveting Transformations<\/em><\/a>.<\/p>\n<h2 id=\"effects\">CSS Image Effects<\/h2> \n<p>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.<\/p>\n<h3>Rounded Corners<\/h3>\n<p>A rounding configuration through the <code>border-radius<\/code> 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.<\/p>\n<p>For example, to create a slightly rounded shape:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img {\n  border-radius: 15px;\n}\n<\/code><\/pre>\n<p>To create an ellipse or circle:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img {\n  border-radius: 50%;\n}\n<\/code><\/pre>\n<h3>Thumbnails<\/h3>\n<p>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.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img {\n  border: 2px solid #ddd;\n  border-radius: 3px;\n  padding: 5px;\n  width: 350px;\n}\n<\/code><\/pre>\n<p>For more details, see the article <a href=\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\"><em>CSS Image Effects: Five Simple Examples and a Quick Animation Guide<\/em><\/a>.<\/p>\n<h3>Responsive Sizing<\/h3>\n<p>Responsive images resize according to your user\u2019s 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.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img {\n  max-width: 70vw;\n  height: auto;\n}\n<\/code><\/pre>\n<p>For more details, see the article <a href=\"https:\/\/cloudinary.com\/blog\/make_all_images_on_your_website_responsive_in_3_easy_steps\"><em>How to Create Images for Responsive Web Design<\/em><\/a>.<\/p>\n<h3>Transformations<\/h3>\n<p>You can transform images by setting their <code>scale<\/code>, <code>skew<\/code>, <code>rotate<\/code>, or <code>perspective<\/code> parameter through the <code>transform<\/code> property. Furthermore, combining <code>transform<\/code> with JavaScript or animation modules creates movement or rotational images.<\/p>\n<p>However, because browsers do not yet fully support the <code>transform<\/code> property, you must add prefixes to ensure compatibility, as in this example:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img {\n-webkit-transform: rotate(20deg) skewY(20deg); \/Chrome, Safari, Opera\/\n-moz-transform: rotate(20deg) skewY(20deg); \/Firefox\/\n-ms-transform: rotate(20deg) skewY(20deg); \/ Internet Explorer \/\n}\n<\/code><\/pre>\n<p>For compatibility with Internet Explorer, add the following:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>img {\n-webkit-transform: rotate(20deg) skewY(20deg); \/Chrome, Safari, Opera\/\n-moz-transform: rotate(20deg) skewY(20deg); \/Firefox\/\n-o-transform: rotate(20deg) skewY(20deg); \/ Internet Explorer \/\n-ms-transform: rotate(20deg) skewY(20deg); \/ Internet Explorer \/\n-sand-transform: rotate(20deg) skewY(20deg); \/ Internet Explorer \/\n}\n<\/code><\/pre>\n<h3 id=\"advanced techniques\">Advanced Techniques<\/h3>\n<p>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.<\/p>\n<h2 id=\"cloudinary\">Transformations With Cloudinary<\/h2> \n<p>A cloud-based service for managing images and videos, Cloudinary offers a generous <a href=\"https:\/\/cloudinary.com\/users\/register_free\">free-forever subscription plan<\/a>. 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.<\/p>\n<p>Additionally, you can transform images programmatically with <a href=\"https:\/\/cloudinary.com\/documentation\">SDKs<\/a> 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\u2014a huge convenience and time saver.<\/p>\n<h2 id=\"resources\">Additional Resources<\/h2>\n<p>The Cloudinary site contains many informative articles on CSS images. Below are a few examples.<\/p>\n<p><strong>Basic and Bonus CSS Image-Overlay Effects<\/strong><\/p>\n<p>Overlays deliver special effects to images with text or other graphic elements, such as captions, banners, and menus, sparking appeal and interest.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/css_image_overlay_overlaying_text_and_images_for_visual_effect\"><em>CSS Image Overlays: Overlaying Text and Images for Visual Effect<\/em><\/a> 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.<\/p>\n<p><strong>Image Resizing: Manually With CSS and Automatically<\/strong><\/p>\n<p>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.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/image_resizing_manually_with_css_and_automatically_with_cloudinary\"><em>Image Resizing: Manually With CSS and Automatically With Cloudinary<\/em><\/a> shows you how to resize images and backgrounds with CSS and how to crop, resize, and rescale images through automation with Cloudinary.<\/p>\n<p><strong>CSS Image Effects<\/strong><\/p>\n<p>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.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/css_image_effects_five_simple_examples_and_a_quick_animation_guide\"><em>CSS Image Effects: Five Simple Examples and a Quick Animation Guide<\/em><\/a> 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.<\/p>\n<p><strong>CSS Image Filters<\/strong><\/p>\n<p>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.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/creating_image_filter_effects_with_css_and_riveting_transformations\"><em>Creating Image-Filter Effects With CSS and Riveting Transformations<\/em><\/a> describes the filter effects that are available and chronicles how to apply them. In particular, you\u2019ll learn how to do that easily with Cloudinary.<\/p>\n<p><strong>JavaScript Image Rotation<\/strong><\/p>\n<p>Flipping or rotating images can add interactivity to your site\u2019s media, e.g., dynamically reference user actions, such as mouseovers or clicks, and drastically change the site\u2019s look and feel.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/rotating_images_in_javascript_three_quick_tutorials\"><em>Rotating Images in JavaScript: Three Quick Tutorials<\/em><\/a> details how to dynamically rotate and flip images with JS and how to simplify that process with Cloudinary.<\/p>\n<p><strong>JavaScript Resizing Tricks and Tips<\/strong><\/p>\n<p>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.<\/p>\n<p>The article <a href=\"https:\/\/cloudinary.com\/blog\/cool_tricks_for_resizing_images_in_javascript\"><em>Cool Tricks for Resizing Images in JavaScript<\/em><\/a> 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\u2014all with Cloudinary.<\/p>\n<\/div>\n\n\n<h2>See Additional Guides on Key Front-End Development Topics<\/h2>\n\n\n<p>\nTogether 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 <a href=\"https:\/\/cloudinary.com\/guides\/front-end-development\/front-end-development-the-complete-guide\">front-end development<\/a>.\n<\/p>\n<h3><a href=\"https:\/\/cloudinary.com\/guides\/e-commerce-platform\/select-the-right-e-commerce-platform-for-your-needs\">eCommerce Platform<\/a><\/h2>\n\n\n<p>\n<em>Authored by Cloudinary<\/em>\n<\/p>\n<ul>\n\n<li><a href=\"https:\/\/cloudinary.com\/guides\/e-commerce-platform\/select-the-right-e-commerce-platform-for-your-needs\">[Guide] Choose the Right E-commerce Platform<\/a><\/li>\n\n<li><a href=\"https:\/\/cloudinary.com\/guides\/e-commerce-platform\/integrate-e-commerce-platforms-and-cms-early-on\">[Guide] Integrate With E-commerce Platforms and CMS Early On<\/a><\/li>\n\n<li><a href=\"https:\/\/cloudinary.com\/blog\/automatically_art_directed_responsive_images\">[Blog] Automatically Art-directed Responsive Images with Cloudinary <\/a><\/li>\n\n<li><a href=\"https:\/\/cloudinary.com\/products\/digital_asset_management\">[Product] Cloudinary Assets | AI-Powered Digital Asset Management<\/a><\/li>\n<\/ul>\n<h3><a href=\"https:\/\/cloudinary.com\/blog\/html5_video_player\">HTML5 Video Player<\/a><\/h2>\n\n\n<p>\n<em>Authored by Cloudinary<\/em>\n<\/p>\n<ul>\n\n<li><a href=\"https:\/\/cloudinary.com\/blog\/html5_video_player\">[Guide] Ultimate HTML5 Video-Player Showdown: 12 Players Compared<\/a><\/li>\n\n<li><a href=\"https:\/\/cloudinary.com\/blog\/reduce_size_of_animated_gifs_automatically_convert_to_webm_and_mp4\">[Blog] Reducing the Size of Animated GIFs <\/a><\/li>\n\n<li><a href=\"https:\/\/cloudinary.com\/\">[Product] Cloudinary | Image and Video API Platform<\/a><\/li>\n<\/ul>\n<h3><a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_choosing_the_best_option\">Lazy loading<\/a><\/h2>\n\n\n<p>\n<em>Authored by Cloudinary<\/em>\n<\/p>\n<ul>\n\n<li><a href=\"https:\/\/cloudinary.com\/blog\/how_to_get_killer_page_performance_with_angular_lazy_loading\">[Guide] How to Get Killer Page Performance With Angular Lazy Loading<\/a><\/li>\n\n<li><a href=\"https:\/\/cloudinary.com\/blog\/lazy_loading_javascript_for_high_speed_webpage_performance\">[Guide] Lazy-Loading JavaScript for High-Speed Webpage Performance<\/a><\/li>\n\n<li><a href=\"https:\/\/cloudinary.com\/blog\/contemplating-codec-comparisons\">[Blog] Contemplating Codec Comparisons<\/a>\n","protected":false},"excerpt":{"rendered":"<p>See Additional Guides on Key Front-End Development Topics 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. eCommerce Platform Authored by Cloudinary [Guide] Choose the Right E-commerce Platform [Guide] Integrate With E-commerce Platforms and CMS Early On [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":22218,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,75,177,227],"class_list":["post-22217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-css","tag-javascript","tag-performance-optimization"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Image | Managing Images With Cascading Style Sheets<\/title>\n<meta name=\"description\" content=\"Learn how to handle and transform CSS images and how Cloudinary helps for free: reposition or resize them, change the backgrounds or borders, and apply filters for special effects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/working_with_css_images\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Working With CSS Images\" \/>\n<meta property=\"og:description\" content=\"Learn how to handle and transform CSS images and how Cloudinary helps for free: reposition or resize them, change the backgrounds or borders, and apply filters for special effects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/working_with_css_images\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-03T01:47:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-15T20:10:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718594\/Web_Assets\/blog\/working_with_css_22218720ab\/working_with_css_22218720ab.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/working_with_css_images#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/working_with_css_images\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Working With CSS Images\",\"datePublished\":\"2020-11-03T01:47:23+00:00\",\"dateModified\":\"2026-03-15T20:10:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/working_with_css_images\"},\"wordCount\":127,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/working_with_css_images#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718594\/Web_Assets\/blog\/working_with_css_22218720ab\/working_with_css_22218720ab.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"CSS\",\"Javascript\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/working_with_css_images\",\"url\":\"https:\/\/cloudinary.com\/blog\/working_with_css_images\",\"name\":\"CSS Image | Managing Images With Cascading Style Sheets\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/working_with_css_images#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/working_with_css_images#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718594\/Web_Assets\/blog\/working_with_css_22218720ab\/working_with_css_22218720ab.jpg?_i=AA\",\"datePublished\":\"2020-11-03T01:47:23+00:00\",\"dateModified\":\"2026-03-15T20:10:51+00:00\",\"description\":\"Learn how to handle and transform CSS images and how Cloudinary helps for free: reposition or resize them, change the backgrounds or borders, and apply filters for special effects.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/working_with_css_images#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/working_with_css_images\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/working_with_css_images#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718594\/Web_Assets\/blog\/working_with_css_22218720ab\/working_with_css_22218720ab.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718594\/Web_Assets\/blog\/working_with_css_22218720ab\/working_with_css_22218720ab.jpg?_i=AA\",\"width\":1540,\"height\":847,\"caption\":\"Image showing a graphic representation of CSS picture and CSS photos\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/working_with_css_images#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Working With CSS Images\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Image | Managing Images With Cascading Style Sheets","description":"Learn how to handle and transform CSS images and how Cloudinary helps for free: reposition or resize them, change the backgrounds or borders, and apply filters for special effects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/working_with_css_images","og_locale":"en_US","og_type":"article","og_title":"Working With CSS Images","og_description":"Learn how to handle and transform CSS images and how Cloudinary helps for free: reposition or resize them, change the backgrounds or borders, and apply filters for special effects.","og_url":"https:\/\/cloudinary.com\/blog\/working_with_css_images","og_site_name":"Cloudinary Blog","article_published_time":"2020-11-03T01:47:23+00:00","article_modified_time":"2026-03-15T20:10:51+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718594\/Web_Assets\/blog\/working_with_css_22218720ab\/working_with_css_22218720ab.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/working_with_css_images#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/working_with_css_images"},"author":{"name":"","@id":""},"headline":"Working With CSS Images","datePublished":"2020-11-03T01:47:23+00:00","dateModified":"2026-03-15T20:10:51+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/working_with_css_images"},"wordCount":127,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/working_with_css_images#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718594\/Web_Assets\/blog\/working_with_css_22218720ab\/working_with_css_22218720ab.jpg?_i=AA","keywords":["Asset Management","CSS","Javascript","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/working_with_css_images","url":"https:\/\/cloudinary.com\/blog\/working_with_css_images","name":"CSS Image | Managing Images With Cascading Style Sheets","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/working_with_css_images#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/working_with_css_images#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718594\/Web_Assets\/blog\/working_with_css_22218720ab\/working_with_css_22218720ab.jpg?_i=AA","datePublished":"2020-11-03T01:47:23+00:00","dateModified":"2026-03-15T20:10:51+00:00","description":"Learn how to handle and transform CSS images and how Cloudinary helps for free: reposition or resize them, change the backgrounds or borders, and apply filters for special effects.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/working_with_css_images#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/working_with_css_images"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/working_with_css_images#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718594\/Web_Assets\/blog\/working_with_css_22218720ab\/working_with_css_22218720ab.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718594\/Web_Assets\/blog\/working_with_css_22218720ab\/working_with_css_22218720ab.jpg?_i=AA","width":1540,"height":847,"caption":"Image showing a graphic representation of CSS picture and CSS photos"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/working_with_css_images#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Working With CSS Images"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718594\/Web_Assets\/blog\/working_with_css_22218720ab\/working_with_css_22218720ab.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22217"}],"version-history":[{"count":17,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22217\/revisions"}],"predecessor-version":[{"id":39884,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22217\/revisions\/39884"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22218"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}