CSS - Image

About

The image type in CSS is given:

From HTML, the URL is specified by attributes such as:

Usage

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>
</div>
<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 {
  position:relative;
  margin:0;
  padding:3rem;
}
  • 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 {
  position:relative;
  color: white;
  font-size:3rem;
  text-transform: uppercase;
}
  • Result:

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%);

Documentation / Specification


Powered by ComboStrap