3.1 The background-repeat Property
The background-repeat and background-size properties in CSS are used to control how background images are repeated and scaled within elements. These properties give web developers flexible tools to create visually appealing backgrounds. Let's dive into each of them in more detail.
The background-repeat property specifies how background images are repeated in an element. By default, a background image is repeated both horizontally and vertically.
Values
repeat: the image is repeated both horizontally and vertically (default)repeat-x: the image is repeated only horizontallyrepeat-y: the image is repeated only verticallyno-repeat: the image is not repeated
1. The repeat Value:
Repeats the image both horizontally and vertically.
.repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat;
border: 1px solid #000;
}
<div class="repeat">Repeat horizontally and vertically</div>
2. The repeat-x Value:
Repeats the image horizontally.
.repeat-x {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-x;
border: 1px solid #000;
}
<div class="repeat-x">Repeat only horizontally</div>
3. The repeat-y Value:
Repeats the image vertically.
.repeat-y {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-y;
border: 1px solid #000;
}
<div class="repeat-y">Repeat only vertically</div>
4. The no-repeat Value:
The image is not repeated.
.no-repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: no-repeat;
border: 1px solid #000;
}
<div class="no-repeat">No repeat</div>
Code Explanation
.repeat: the image repeats both horizontally and vertically, filling up the entire element.repeat-x: the image repeats only horizontally.repeat-y: the image repeats only vertically.no-repeat: the image does not repeat and is displayed just once
3.2 The background-size Property
The background-size property controls the size of the background image. It allows you to resize the image so it fits better within an element.
Values:
auto: the image size is determined automatically (default)cover: the image is scaled to cover the entire element, maintaining proportionscontain: the image is scaled to fit entirely within the element, maintaining proportions- Absolute values: e.g., 100px 50px specify the width and height of the image in pixels
- Percentage values: e.g., 50% 50% specify the width and height of the image as percentages of the element's size
1. Default Size (auto):
The image size is determined automatically (default).
.size-auto {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-size: auto;
border: 1px solid #000;
}
<div class="size-auto">Default size (auto)</div>
2. cover:
The image is scaled to cover the entire element, maintaining proportions.
.size-cover {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: cover;
border: 1px solid #000;
}
<div class="size-cover">Scale to cover (cover)</div>
3. contain:
The image is scaled to fit entirely within the element, maintaining proportions.
.size-contain {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: contain;
border: 1px solid #000;
}
<div class="size-contain">Scale to fit (contain)</div>
4. Absolute values:
For example, 100px 50px specifies the width and height of the image in pixels.
.size-pixels {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 100px 50px;
border: 1px solid #000;
}
<div class="size-pixels">Size in pixels (100px 50px)</div>
5. Percentage values:
For example, 50% 50% specifies the width and height of the image as percentages of the element's size.
.size-percent {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 50% 50%;
border: 1px solid #000;
}
<div class="size-percent">Size in percentage (50% 50%)</div>
Code Explanation:
.size-auto: the image size is determined automatically.size-cover: the image is scaled to cover the entire element, maintaining proportions. Parts of the image may be cropped.size-contain: the image is scaled to fit entirely within the element, maintaining proportions. The whole image will be visible, but there might be empty areas.size-pixels: the image size is specified in pixels (100px wide and 50px high).size-percent: the image size is specified as a percentage of the element's size (50% wide and 50% high)
3.3 Using background-repeat and background-size Together
The background-repeat and background-size properties are often used together to achieve the desired effect for displaying background images.
Example of Usage:
.combined {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-size: cover;
border: 1px solid #000;
}
<body>
<div class="combined">Background image does not repeat and is scaled to cover the element</div>
</body>
Code Explanation:
background-repeat: no-repeat;: the image does not repeatbackground-size: cover;: the image is scaled to cover the entire element, maintaining proportions. Parts of the image may be cropped
GO TO FULL VERSION