CSS: insert picture - that's how it works

In this practical tip we explain how to insert an image using CSS. Basically, images can only be inserted here in the form of background images. However, that is quite sufficient.

Insert image in CSS

For example, if you want to include an image in the header using CSS, such as your logo, then declare the following properties under #header:

1. "background: url (image.webp) #FFFFFF;"
2. Here "bild.webp" is understood as the URL to your image either relative to the css file or as an absolute address on your drive.
3. With the color you declare the background color on your website.
4. The image can now be positioned using an exact position, such as: "background-position: 100px 100px;" or via relative information determined by the window edge such as "background-position: bottom right;".
5. So that your image does not repeat itself continuously, you can specify a "no-repeat" under the property "background-repeat". It looks like this: "background-repeat: no-repeat;".
6. With the property "background-attachment" you determine whether the image moves with the scrolling or stays in a fixed place on the page: "background-attachment: fixed;".
7. The properties are specified in the CSS file without quotation marks.

In the next practical tip, read how to integrate a CSS file using HTML.