Backgrounds and borders

Background colors

The background-color property defines the background color on any element in CSS. The property accepts any valid color. A background-color extends underneath the content and padding box of the element.

background-color: black;

Background images

background-image: url(balloons.jpg);

The background-image property enables the display of an image in the background of an element.

By default, the large image is not scaled down to fit the box, so we only see a small corner of it, whereas the small image is tiled or repeated itself to fill the box.

This is the something that we don't want normally. So in order to fix this, we use some properties. And those properties are following

Controlling background-repeat

The background-repeat property is used to control the tiling or repeating behavior of images. The available values are:

a) no-repeat — stop the background from repeating altogether.

b) repeat-x — repeat horizontally.

c) repeat-y — repeat vertically.

d) repeat — the default; repeat in both directions.

Sizing the background image

The balloons.jpg image used in the initial background images example, is a large image that was cropped due to being larger than the element it is a background of. In this case we could use the background-size property, which can take length or percentage values, to size the image to fit inside the background.

You can use background-size: cover and background-size: contain.

Positioning the background image

The background-position property allows you to choose the position in which the background image appears on the box it is applied to. This uses a coordinate system in which the top-left-hand corner of the box is (0,0), and the box is positioned along the horizontal (x) and vertical (y) axes.

background-position: 20px 10%;

background-position: top center;

Gradient backgrounds

background: linear-gradient(#f69d3c, #3f87a6);

background: radial-gradient(#f69d3c, #3f87a6);

background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);

background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);

background: conic-gradient(#f69d3c, #3f87a6);

Multiple background images

background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png);

Background attachment

Another option we have available for backgrounds is specifying how they scroll when the content scrolls. This is controlled using the background-attachment: property, which can take the following values:

a) scroll: causes the element's background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls.

b) fixed: causes an element's background to be fixed to the viewport so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen.

c) local: fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.