CSS: background image

background image

background-image property adds an image (or gradient) as background.

Can be multiple, separated by comma.

default is none

image value

url("URL")

.x {
  background-image: url("pattern.jpg");
}

gradient value

• CSS: Gradient. Index

example

<div class="prVGy">good morn</div>

.prVGy {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 width: 289px;
 height: 217px;
}

full image:

Multiple images

layered, first one is on top.

the top image should have transparency spots, so it act like windows showing content below.

.x {
 background-image: url("image-mask.png"), url("main-bg.jpg");
}