CSS Report 3 - Backgrounds

The following section below discusses how to implement backgrounds using CSS:


Backgrounds in CSS

Background implementation in CSS draws a good amount on knowledge of the box model that we learned earlier. This webpage shows various implementations of backgrounds. The body background is a repeating image, the different headings have color backgrounds, and this box has a black background along with stars repeating on the right side.

In CSS, background appearance can be customized using the shorthand property, the main values that can be changed are the background-color, background-image, background-repeat, background-attachment, and background-position. If the background image is transparent, like the one to the right here, the background color will show behind it. The stars here also repeat, so the longer the box becomes vertically, the more starts you will see repeating vertically as well. Attachment is set to scroll by default, meaning the image will will be fixed relative to the element itself, so it will not scroll with the elements contents, as if it were attached to it. The position can be defined by x and y values for precise placement.


Sources linked below:

[1] [2] [3]