Backgrounds
The CSS background properties are used to add background effects for elements.
By Susana deOliveira
When you start, the first property you learn is background-color, and that's it. With a little more time, you move on to another property, like background-image And as something truly sublime you discover how to make color transitions to create different effects using the CSS linear-gradient() Function.
There are details that are irrelevant to a good design, but if you care about the small details, such as adding borders to an element with a certain color or a special frame for a photo or the background of an element, such as a button, and the effect is not what you expected, there are properties that, when working together, solve the problem: background-clip, changing its default value: border-box and background-origin, changing its default value: padding-box, or combining the values of each property. It depends on the design you are going for.
CSS background-clip Property
Specifies the painting area of the background.
background-clip: border-box
background-origin: border-box
background-clip: padding-box
background-origin: border-box
background-clip: content-box
background-origin: border-box
background-clip: border-box
background-origin: padding-box
background-clip: padding-box
background-origin: padding-box
background-clip: content-box
background-origin: padding-box
[If you see the button at the bottom of the page, to take you to the top of the page, I changed from border-box to padding-box.]
Playing with backgrounds
CSS background-image Property allows you to set an image as a background or set background combinations using gradients. Gradients can be used anywhere you would use an image such as in backgrounds.
Choosing a frame
Creativity
Next, the background is cut out from the foreground text. This process has a similar effect to the mask image, but instead of an image, which could also be used, I use a gradient as the background. The text should have a transparent or semi-transparent area, with black indicating full transparency.
background-clip: text
And finally, the background is painted within (clipped to) the area painted by the border, taking border-width and border-style into account but ignoring any transparency introduced by border-color.
background-clip: border-area
CSS @supports rule allows you to test whether a browser supports a CSS feature and define alternative styles if the feature is not supported. For both background-clip: text and background-clip: border-area, it is necesaary. And set background-origen: border-box, because it helps to correct errors in browsers that do not support border-area and not only, in the others, it also changes the design, but this depends on what we like most.
[You can learn more about gradients, not only, and practice through the next link: MDN Web Docs]
"App makeovers"
I apply a solid color background and a gradient to each app to see the difference. Sometimes, a small detail makes a project truly stand out. That's also a matter of taste!. View them through the iframe or open in a new tab.
CSS background-origin Property
Sets the origin point for a background image's position.
While background-clip determines where the background image or color is clipped—that is, how far it extends into an element—background-origin determines the starting point for the background image's position.
By default, background-origin: padding-box makes the background extend to cover the content and its padding, not the space where the border exists. It then repeats the background in each direction, under the border. And the effects are appreciated when we place a padding on the element and change the values.
In conclusion, whenever we work with elements that we have designed with padding, we must keep in mind that the background-origin, with its default value, may change the results we want or can be used to create special effects.
[You can read more information about these two properties through the following link: Webkit]