MENU


Image Values

Use a CSS function such as

to specify an image.


1. URL
Displaying an image with the CSS 'background' property rather than with the <img> tag disables the direct downloading of the image (by right-clicking on it).
RESETRUNFULL
<!DOCTPYPE html><html><body>
   <div style="width:1500px; height:800px; background:url('/shared/tile.jpg') repeat;"></div>
</body></html>


2. PaintWorklet

The CSS paint() function defines an <image> value generated with a PaintWorklet.


RESETRUNFULL
<!DOCTYPE html><html><head>
<script>
CSS.paintWorklet.addModule(`data:application/javascript;charset=utf8,${encodeURIComponent(` 
   class CheckerboardPainter { 
      paint(ctx, geom, properties) { 
         const colors = ['red', 'green', 'blue'];
         const size = 32; 
         for(let y = 0; y < geom.height/size; y++) { 
            for(let x = 0; x < geom.width/size; x++) { 
               const color = colors[(x + y) % colors.length]; 
               ctx.beginPath(); 
               ctx.fillStyle = color; 
               ctx.rect(x * size, y * size, size, size); 
               ctx.fill(); 
            }
         }
      }
   }
   registerPaint('checkerboard', CheckerboardPainter);
`)}`);
</script>
</head><body>
   <textarea style="background:paint(checkerboard); width:100px; height:100px;"></textarea> 
</body></html>


3. Color gradientsCSS gradient functions take the form:
[repeating-]{linear | radial | conic}-gradient([direction & position]{color stop,}+)


RESETRUNFULL
<!DOCTYPE html><html><head>
<style>
   div { width:100%; height:80px;}
</style>
</head><body>
  <div style="background: linear-gradient(transparent,black)">top to bottom</div>
  <div style="background: linear-gradient(to top right, red, 30%, blue, 70%, green 90%,purple)">turning to midpoint color between red and blue at 30%, to green at 90%</div>
  <div style="background: linear-gradient(90deg, red, 30%, blue 70% 90%, green)">purely blue between 70% and 90% </div>
  <div style="background: repeating-linear-gradient(to bottom, red 40%, blue 50%, green 60%)">repeated 100%/(60%-40%)=5 times</div> 
  <div style="background: radial-gradient(black, green,black)">circle at center ending at farthest-corner</div>
  <div style="background: radial-gradient(400px, red 10% 15%, transparent 30%, 50%, green)">circle starting at center</div>
  <div style="background: radial-gradient(400px 900% at 50% 50%, red, green)">ellipse starting at center</div>
  <div style="background: radial-gradient(closest-corner at 70% 300px, red, green)">circle ending at closest corner</div>
  <div style="background: radial-gradient(ellipse farthest-side, red, green)">ellipse ending at farthest side</div>
  <div style="background: repeating-radial-gradient(ellipse farthest-side, red 70% 80%, green 90% 100%)">repeated 100%/(90%-70%)=5 times inward</div><div style="background: conic-gradient(red,white,green 50%,70%,blue 80% 90%,gray)">from 0deg starting at center</div>
  <div style="background: conic-gradient(from 0.2turn at 80% 30px, red,white)">starting at 80% from left 30px from top</div>
  <div style="background: conic-gradient(from 45deg, rgb(255,0,0),white,hsla(60,30%,40%,0.7),white)">starting at center</div>
  <div style="background: repeating-conic-gradient(at 10vw 10vh,white 10%,purple 20%)">repeated 100%/(20%-10%)=10 times</div>
</body></html>


The following CSS image functions have been proposed but not been universally implemented by browsers.
element(#realid) 
/* A part of the webpage where "realid" is the ID of an element on the page. */ 

image(ltr 'arrow.png#xywh=0,0,16,16', red) 
/* A 16x16 section, starting from the top left of the original image. If arrow.png is not supported, show a solid red swatch. If rtl is used instead, the image will be horizontally flipped. */ 

image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
 /* a selection of images with varying resolutions */
 
cross-fade( url(white.png) 25%, url(black.png)); 
/* This can be used to blend two or more images at a defined transparency value. It can be used for many simple 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. */