The image type in CSS is given:
From HTML, the URL is specified by attributes such as:
You can also apply this properties on image
And because an image is an object, you can also used the object properties
Example with a background image created with an html img
<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"/>
.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%;
}
.slide {
position:relative;
margin:0;
padding:3rem;
}
.slide h1 {
position:relative;
color: white;
font-size:3rem;
text-transform: uppercase;
}
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: url("/images/toc-bullet.png");
list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);