Background Image

One of the most attractive ways to style a web page is by using background images. Background images cover the entire element and add a visually appealing touch to your website. There is a range of properties available in CSS to style background images.

Setting a Background Image

To set a background image, we can use the background-image property. Here’s the syntax:

1selector {
2    background-image: url('your-image-location');
3}

Replace 'your-image-location' with the path of the image you want to use as the background.

Background Repeat

By default, the background image will repeat itself to fill the entire area of the element. However, you can change this property according to your requirements.

1selector {
2    background-repeat: repeat-x; /* Horizontal repeat */
3    background-repeat: repeat-y; /* Vertical repeat */
4    background-repeat: no-repeat; /* No repeat */
5}

Background Position

The background-position property is used to define where the background image should be displayed within its container. The most common ways are:

1selector {
2    background-position: center center; /* Centered */
3    background-position: left top; /* Top left */
4    background-position: right bottom; /* Bottom right */
5}

Background Size

It is also possible to adjust the size of the background image. We can use the background-size property for this. The most common values are:

1selector {
2    background-size: cover; /* Ensure full coverage */
3    background-size: contain; /* Ensure fit within container */
4    background-size: auto; /* Default size */
5    background-size: 50% 50%; /* Width and height in percentages */
6    background-size: 200px 100px; /* Width and height in pixels */
7}

Shorthand Property

We can use the background shorthand property to apply all background-related properties in a single line. This property has several values that must be assigned in a specific order.

1selector {
2    background: color image repeat position/size;
3}

Example

Here’s an example of how to use the background shorthand property:

1selector {
2    background: #ffffff url('https://static.code-hl.com/resources/css-background.png') no-repeat center center/cover;
3}