Chocolate wafer CSS background
body {
min-height: 100dvh;
margin: 0;
border-inline: 0.5rem solid hsl(13, 63%, 14%);
background-image: linear-gradient(
90deg,
hsl(13, 38%, 28%),
hsl(13, 38%, 32%) 7%,
hsl(13, 38%, 38%) 7%,
hsl(13, 38%, 44%) 14%,
hsl(13, 26%, 50%) 14% 15.5%,
hsl(13, 38%, 38%) 15.5% 85%,
hsl(13, 54%, 24%) 85% 87%,
hsl(13, 59%, 16%) 87% 90%,
hsl(13, 67%, 12%) 90% 100%
);
background-size: 120px;
background-position: left;
}
@media screen and (max-width: 600px) {
body {
background-size: 16.66%;
}
} Description
A background image of a bar of chocolate with a row of vertical wafers.
Practice with the background family of properties and the linear-gradient() CSS function.