Background Gradients

<img loading='lazy' decoding='async'/> //defer loading until close to viewport

background: url('') center / cover no-repeat;

background-image: url(), url(); //top to bottom
background-size: 300px , cover; //for img1, img2

background-position: center 100px; // (x,y) box-relative

background-clip: text; /* show bg only behind text */
background-blend-mode : overlay

background-attachment.

• fixed : attached to viewport ie., will never scroll.
• local: attached to element's content ie. scrolls alongwith it
• scroll: attached to element's border ie. willn't scroll with content

Build Gradients with background-image

linear-gradient(blue, red 40%, orange) /* be blue at 0%, red at 40%, orange at 100% */
linear-gradient(red 30px, green) /* hard red from 0-30px */
linear-gradient(red , 30% , blue) /* use 30% as midpoint */
radial-gradient(red, yellow)

Scalable Vector Graphics

• SVG is a XML based markup for vector images. Raster images are pixel based.
• SVG Viewbox : viewable area coords (<= svg's width * height)
• SVG elements : rect circle line etc.
• Element attributes (px): x y width height x1 x2 y1 y2 cx cy r

<svg xmlns="..." viewBox="0 0 100 100">
	<rect class="one" fill="blue"/>
	<text>Hi there !!!</text> 
	Alt text for svg 
</svg>