CSS - Image

1 - About

The image type in CSS is given:

From HTML, the URLis specified by attributes such as:
  • the src attribute of an img element.
  • the data attribute of an object element.

3 - Usage

3.1 - Property

You can also apply this properties on image

  • image-orientation (apply an “out-of-band” rotation to image source data to correctly orient an image.)
  • image rendering (how to recreate a raster image when scaling up or down)

And because an image is an object, you can also used the object properties

Example with a background image created with an html img

  • The HTML of a minimal slide with a background image and a heading

<h1>The Slide with image and its properties</h1>
<div class="slide">
  <img class="background-img" src="/_media/eniac_1946.jpg"/>
  <h1>A demo on image CSS properties</h1>
<h1>The image downscaled to 300px height</h1>
<p>By comparing the two images, you can see the effect of the <mark>object-fit</mark> and <mark>object-position</mark> properties</p>
<img src="/_media/eniac_1946.jpg" height="300px"/>

  • The CSS rule for the image element to make it a background image

.background-img {
    object-fit: cover; /* The filling algorithm */
    object-position: center center; /* The image will be centered */
    image-rendering: auto; /* The image will be upscaled (or downscaled) using the algorithm specified */
    /* positioning property that set the element has background */
    /* ie not in the normal flow, top, left taking 100% width and height of its parent */
    position: absolute !important; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

  • The slide CSS (ie container) that sets the position to relative to be able to use the previous absolute positioning of the image

.slide {

  • Set the property of the heading. All descendant of a relative elements needs to be relative to see them (by default an element is static)

.slide h1 {
  color: white;
  text-transform: uppercase;

  • Result:

3.2 - Property Value

An image type can be used in many CSS properties value

background-image: url(wavy.png);
background: linear-gradient(white, gray);

mask-image: url(icon.svg#foo) 

  • list-style-image: The list-style-image property sets the image that will be used as the list item marker.

list-style-image: url("/images/toc-bullet.png");
list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);

4 - Documentation / Specification

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap