The contents will be in the foreground when the image is in the background.
The image size and background-size won't match. There will be a conflict, and it all boils down to solving this conflict.
To demonstrate this, I have an image - 124x124px.
I am giving this image as a background image to the body.
See the output,
What is happening here?
Our 124x124px image is repeating both on X-axis and Y-axis.
That's the default setting.
We can change this default.
body {
background-color: black;
background-image: url(background.jpg);
background-repeat: no-repeat;
}
body {
background-color: black;
background-image: url(background.jpg);
background-repeat: repeat-x;
}
body {
background-color: black;
background-image: url(background.jpg);
background-repeat: repeat-y;
}
Then we have 'space' and 'round', which can be understood by changing the viewport size using dev tools. Please do this and see what happens.
'Space' creates space between image-repeat when size changes whereas 'round' creates doesn't create any space between image repeats.
Now that we have seen a smaller image than the parent, what if the image is a bigger image than the parent?
I will give a demo of this through a gif.
.background-container {
/* must include height */
height: 100vh;
background-image: url(large-background.jpeg);
background-repeat: no-repeat;
background-size: contain;
}The image size is 1125 x 750px.
And the property is background-size, and the value can be 'contain' or 'cover'.
In the context of background-size property in CSS, maintaining aspect ratio means that
when an image is scaled up or down to fit within an element, its original width-to-height ratio is preserved.
This ensures that the image does not appear distorted or stretched out of shape.
The main difference between cover and contain in CSS is how they handle scaling of the background image.
Cover:
The cover value scales the image to completely cover the entire element while maintaining the image's aspect ratio.
This means that the image may be cropped or extended beyond the bounds of the element to fill the available space
Contain:
On the other hand, the contain value scales the image to fit entirely within the element, while also maintaining the aspect ratio of the image.
This means that the entire image will be visible within the element, and there will be no cropping or extending beyond the element's bounds.
Therefore empty space may come in contain.
Background-position property:
We position on a web page.
The background-position property sets the starting position of a background image.
By default, it is placed at the top-left corner of an element.
They can have two values - top center, bottom center, top, etc.
If the second value is not given, it is treated as the center.
Or you can give values in % or px.
The first value is the horizontal axis, and the second is the vertical axis.
Background-origin property:
This property is for placing the image in which box.
We have the content box, padding box, and border box.
Background-clip property:
Clip means trimming.
Same value as background property.
If the clipping box is
border-box -> default -> Any area outside the border box will be clipped out or trimmed.
padding-box -> Any area outside the padding-box will be clipped out or trimmed.
content-box -> default -> Any area outside the content-box will be clipped out or trimmed.
Background-attachment property:
This property is all about how the background image and content placed on it move relative to each other.
By default, it is scroll.
When the image and content placed on it moves together, it is scroll. If the content exceeds the image size, it overflows.
When the image is static/fixed, and its content moves, it is fixed.
Then you have a value called - local.
The distinction between scroll and local values can be confusing. When there is only a single scroll bar on the page, a scroll setting and a local setting behave precisely the same because, under those circumstances, local refers to the entire space within the scrollable element.
The difference between these two values comes when there are at least two scrollable areas on the page, one inside the other.
The inner scroll bar will not move the image if the background-attachment is scroll. To have an inner scroll bar move, we need local property.
Background shorthand property:
We can give many background properties in a single declaration.
The order of values is
background-color
background-image
background-repeat
background-attachment
background-position.
It does not matter if one of the property values is missing as long as the other ones are in this order.
background: #000000 url(background.jpg) no-repeat right top;We didn't give background-attachment property here, but the other values are in order. So it works!