About
The image type in CSS is given:
- a url that specifies:
- dedicated markup formats (such as SVG)
- or a gradient function (such as linear-gradient that generate CSS-specific images formats)
From HTML, the URL is specified by attributes such as:
- the src attribute of an img element.
- the data attribute of an object element.
Articles Related
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
- object-fit (how to position the image - cover, contain,..)
- object-position (from where to start to position the image)
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;
}
.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 (CSS - Background (Image))
background-image: url(wavy.png);
background: linear-gradient(white, gray);
mask-image: url(icon.svg#foo)
- wiki/CSS/Properties/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%);