Как разместить фоновое изображение с помощью псевдоселекторов :: before в CSS?

Учитывая веб-страницу, и задача состоит в том, чтобы разместить фоновое изображение на веб-странице, используя псевдоселектор :: before.

Псевдоселектор :: before используется для размещения чего-либо перед содержимым выбранных элементов.

Синтаксис:

 .container :: before {
    содержание: '';
    фон: url (файл изображения);
    позиция: абсолютная;
    верх: 0px;
    слева: 0px;
}

Подход: псевдоселектор :: before помещает фоновое изображение перед выбранным элементом, и если выбранный элемент имеет связанный с ним цвет фона, мы можем использовать свойство z-index, чтобы сделать фоновое изображение видимым.

Пример:

Выход:

Ссылка на изображение: https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200212230557/How-To-Become-A-Web-Developer-in-2020-A-Complete-Guide.png