We have said that the CSS language boasts numerous properties. One of the most used is certainly the generic "background" property, which, as the name suggests, is related to the backgrounds of the elements of your web page.
Now, this generic property can deal with the background of an element in different ways.
Let's go, therefore, to analyze the background properties.
- background-color: the value of this property must be assigned exactly in any of the color value modes seen in the previous guide.
- background-image: it is used to set a background image to your element; it will accept as a value the writing “url” followed by the link to the image or the path of the image on your computer . It is best practice to use a path internal to your computer and not a link to a website, since that resource may not be permanent on that link.
Example:
.element1 {
background-image: url(https://coding180.com/image.jpg)
}
- background-repeat: this property will allow you to repeat or not the background image of your element; the value will be assigned with a keyword chosen from 'repeat x ' (to repeat it horizontally), 'repeat y' (to repeat it vertically) and 'no repeat' (not to repeat it at all).
- background-position: determine the position of your background in the element; accepts the keywords 'bottom', 'left', 'right' and 'top' as values or a pixel size starting from the top left.
Note: Inserting only two values, we will refer to the x-axis and the y-axis for
Example:
.element1 {
background-position: 50px 50px;
}
- background-size: the keywords accepted as values are 'auto ' (which keeps the image exactly as it is), 'contain' (which enlarges the image as much as possible without stretching or cutting it) and 'cover ' (which gives full page image)
- background-attachment: this property regulates the behavior of the image with respect to the page scroll; the accepted values, always expressed in keywords, are 'scroll' (default value thanks to which the image remains in its position, therefore it will no longer be visible when you scroll the page) and 'fixed' (thanks to which we obtain the so-called "parallax effect”: the image remains fixed and does not disappear when the page is scrolled).
The linear gradient
The background property can also accept one more value. We are talking about the linear gradient.
The great advantage of the web compared to printed paper is that it has an excellent rendering of color shades, which in many cases, if dosed and used in the right measure and method, can make our websites much more attractive.
But how does the linear gradient work?
header {
background: linear-gradient(angle in deg, color1, color2);
}
In the example above, we used the linear-gradient as the value of the background property.
As you can see, immediately adjacent to it, we have inserted some instructions, namely the angle of the gradient, obviously expressed in degrees (therefore, for example, 120deg), the color from which the gradient must start and the color where it must arrive. Separated by a comma.
This is the syntax for using the linear gradient.
Colors entered as linear-gradient values can be expressed in all the ways we saw when we talked about the property inherent in color.
But that is not all! In fact, the CSS language allows us to literally indulge ourselves and express our creative flair as we wish.
We can also add transparencies to our shades.
To add transparency to our linear-gradient, we use the rgba() function to define color stops. The last parameter of the rgba() function can be a value from 0 to 1 and defines the transparency of the color: as already said, 0 indicates full transparency, 1 indicates full color.
The following example shows a gradient that is totally transparent at the start and changes to solid black:
header {
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)), url(https://coding180.com/image.jpg);
}
This trick can be particularly useful when you want to apply a subspecies of overlay to the image of your header, perhaps to make the textual elements inside it more readable. As you can see, in fact, the linear-gradient here has been applied to the 'background-image' property and followed by the URL of the image to use.
