CSS Images

MDN The image-orientation CSS property specifies a layout-independent correction to the orientation of an image.

#example-element {
  height: inherit;
}

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/hummingbird.jpg" />
</section>

from-image | none | [ <angle> || flip ]

Specification ↗ MDN reference ↗

MDN The image-rendering CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.

#example-element {
  height: 480px;
  object-fit: cover;
}

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/lizard.png" />
</section>

auto | smooth | high-quality | pixelated | crisp-edges

Specification ↗ MDN reference ↗

MDN The image-resolution CSS property specifies the intrinsic resolution of all raster images used in or on the element. It affects content images such as replaced elements and generated content, and decorative images such as background-image images.

[ from-image || <resolution> ] && snap?

Specification ↗ MDN reference ↗

MDN The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

#example-element {
  height: 100%;
  width: 100%;
  border: 2px dotted #888888;
}

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/plumeria-146x200.jpg" />
</section>

fill | none | [contain | cover] || scale-down

Specification ↗ MDN reference ↗

MDN The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.

#example-element {
  height: 250px;
  width: 250px;
  object-fit: none;
  border: 1px solid red;
}

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/moon.jpg" />
</section>

<position>

Specification ↗ MDN reference ↗

MDN The object-view-box CSS property defines a rectangle as a viewable area (viewbox) within a replaced element, enabling the content of the replaced element to be zoomed or panned. It works similarly to the SVG viewBox attribute.

#example-element {
  height: 100%;
  width: 100%;
  border: 2px dotted #888888;
}

@supports not (object-view-box: none) {
  body::before {
    content: "Your browser does not support the 'object-view-box' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
  }
}

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="https://developer.mozilla.org/shared-assets/images/examples/plumeria-146x200.jpg"
    alt="A close-up of red flowers and buds on a branch." />
</section>

none | <basic-shape-rect>

Specification ↗ MDN reference ↗

Spec Implementations must accept -webkit-image-set() as a parse-time alias of image-set(). (It’s a valid value, with identical arguments to image-set(), and is turned into image-set() during parsing.)

Specification ↗

MDN The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the gradient data type, which is a special kind of image.

#example-element {
  min-height: 100%;
}

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

conic-gradient( [ <conic-gradient-syntax> ] )

Specification ↗ MDN reference ↗

MDN The cross-fade() CSS function can be used to blend two or more images at a defined transparency. It can be used for many basic image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.

.cross-fade {
  width: 300px;
  height: 300px;
  background-image: -webkit-cross-fade(url("br.png"), url("tr.png"), 75%);
  background-image: cross-fade(url("br.png"), url("tr.png"), 75%);
}

<div class="cross-fade"></div>

cross-fade( <cf-image># )

Specification ↗ MDN reference ↗

MDN The element() CSS function defines an image value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.

#target-box {
  width: 400px;
  height: 400px;
  background: -moz-element(#my-background) no-repeat;
}

#background-container {
  overflow: hidden;
  height: 0;
}

#my-background {
  width: 1024px;
  height: 1024px;
  background-image: linear-gradient(to right, red, orange, yellow, white);
}

#my-background p {
  transform-origin: 0 0;
  rotate: 45deg;
  color: white;
}

<div id="target-box">
  <p>This box uses the element with the #my-background ID as its background!</p>
</div>

<div id="background-container">
  <div id="my-background">
    <p>This text is part of the background. Cool, huh?</p>
  </div>
</div>

element( <id-selector> )

Specification ↗ MDN reference ↗

Spec Delivering the most appropriate image resolution for a user’s device can be a difficult task. Ideally, images should be in the same resolution as the device they’re being viewed in, which can vary between users. However, other factors can factor into the decision of which image to send; for example, if the user is on a slow mobile connection, they may prefer to receive lower-res images rather than waiting for a large proper-res image to load. The image-set() function allows an author to ignore most of these issues, simply providing multiple resolutions of an image and letting the UA decide which is most appropriate in a given situation.

MDN The image-set() CSS functional notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.

.box {
  width: 400px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: image-set(
    url("https://mdn.github.io/shared-assets/images/examples/balloons-small.jpg")
      1x,
    url("https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg")
      2x
  );
}

<div class="box"></div>

image-set( <image-set-option># )

Specification ↗ MDN reference ↗

MDN The image() CSS function defines an image in a similar fashion to the url() function, but with added functionality including specifying the image's directionality, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.

ul {
  list-style-image: image(ltr "rightarrow.png");
}

<ul>
  <li dir="ltr">Bullet is a right facing arrow on the left</li>
  <li dir="rtl">Bullet is the same arrow, flipped to point left.</li>
</ul>

image( <image-tags>? [ <image-src>? , <color>? ]! )

Specification ↗ MDN reference ↗

Spec The linear-gradient() notation specifies a linear gradient in CSS. Its syntax is as follows:

MDN The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the gradient data type, which is a special kind of image.

#example-element {
  min-height: 100%;
}

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

linear-gradient( [ <linear-gradient-syntax> ] )

Specification ↗ MDN reference ↗

Spec The radial-gradient() notation specifies a radial gradient by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100% ellipse). Color stops are given as a list, just as for linear-gradient(). Starting from the gradient center and progressing towards (and potentially beyond) the ending shape, uniformly-scaled concentric ellipses are drawn and colored according to the specified color stops.

MDN The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the gradient data type, which is a special kind of image.

#example-element {
  min-height: 100%;
}

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

radial-gradient( [ <radial-gradient-syntax> ] )

Specification ↗ MDN reference ↗

Spec In addition to linear-gradient(), radial-gradient(), and conic-gradient(), this specification defines repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.

MDN The repeating-conic-gradient() CSS function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center).

#example-element {
  min-height: 100%;
}

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

repeating-conic-gradient( [ <conic-gradient-syntax> ] )

Specification ↗ MDN reference ↗

Spec In addition to linear-gradient(), radial-gradient(), and conic-gradient(), this specification defines repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.

MDN The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The function's result is an object of the gradient data type, which is a special kind of image.

#example-element {
  min-height: 100%;
}

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

repeating-linear-gradient( [ <linear-gradient-syntax> ] )

Specification ↗ MDN reference ↗

Spec In addition to linear-gradient(), radial-gradient(), and conic-gradient(), this specification defines repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.

MDN The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. It is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient(). The function's result is an object of the gradient data type, which is a special kind of image.

#example-element {
  min-height: 100%;
}

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

repeating-radial-gradient( [ <radial-gradient-syntax> ] )

Specification ↗ MDN reference ↗

Spec The stripes() function defines a 1D image as a comma-separated list of colored stripes, each placed end-to-end on the paint line in the order given.

stripes( <color-stripe># )

Specification ↗

MDN The <gradient> CSS data type is a special type of image that consists of a progressive transition between two or more colors.

#example-element {
  min-height: 100%;
}

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

[ <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | <repeating-conic-gradient()> ]

Specification ↗ MDN reference ↗

MDN The <image> CSS data type represents a two-dimensional image.

<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

Specification ↗ MDN reference ↗