Elementa
HTML: Background-image
Using the "background-image" attribute, you can assign a background image to any elements in your HTML document. In most cases, images are used to fill the background. Of course, it is a matter of taste whether you want to assign just a color to the background or fill it with an image.
This is what you need to keep in mind when using a background image in HTML
Assigning an image using the attribute is not enough. By default, it will be formatted in a way you most likely do not want and cannot use the image.- To use the "background-image" attribute, you must specify it directly in the opening tag of the element: [<body style="background-image: url("PATH");">].
- You can also specify multiple images in a row in the attributes. In this case, the first named is set to the top position, so it is used one level higher.
- Background images can have transparency. In the transparent places, either another image is displayed or the background color is reproduced.
How can the image be displayed properly?
Since images displayed by the "background-image" attribute are by default positioned in the upper left corner of the window and then repeated infinitely, it requires some formatting.- Nutzen Sie zusätzlich das Attribut „background-size: cover“, damit das Bild über den kompletten Bildschirm gestreckt wird.
- Zusätzlich können Sie durch „background-repeat: no -repeat“ verhindern, dass der Hintergrund unendlich oft wiederholt wird.
- Über das Attribut „background-image: linear-gradient()“ können Sie zudem einen linearen Gradienten als Hintergrund erstellen lassen.
